我找到了一种在 Vue.js 中创建动画的新方法 - 2D 角色进展：您将在特定时间移动该图片中的每个角色。解决方案：你会看到角色在移动。我创造了我自己的角色。之后我想改变这个角色的动画numTotal > 0。正是我想要做的：我的主要动画被调用idle，当numTotal > 0想要将动画更改为时angry，2 秒后动画应该切换回我的动画idle查看.js<div class="character" :style="inlineStyle"></div>数据data() { return { animationDelay: 2000, angry: 'animation-name: angry', idle: 'animation-name: idle', currentAnimation: null, afterAnimation: null, animation: null, } },计算的computed: { inlineStyle() { if (this.numTotal > 0) { this.updateAnimation(this.animation, this.angry, this.idle) return this.animation } else { this.animation = this.idle return this.animation } } },方法 methods: { updateAnimation(animation, currentAnimation, afterAnimation){ animation = currentAnimation setTimeout(() => { animation = afterAnimation }, 500) },风格.character { background-image: url("http://huwe_final.test/images/character-animation.png?7b1c86288eb21d80e5981e0693e08d5e"); position: absolute; z-index: 100; width: 93%; height: 747px; margin-left: 3px;; animation-iteration-count: infinite; animation-timing-function: steps(24); animation-duration: 1.2s;}@keyframes idle { from { background-position: 0 0; } to { background-position: -11782px 0; }}@keyframes angry { from { background-position: 0 745px; } to { background-position: -11782px 745px; }}我遇到的问题是，setTimeout即使我在控制台动画中编写时我也无法正常工作 -console.log(animation)我看到animation已经更改为angry，但在网站上动画仍然存在idle有谁知道如何解决setTimeout？感谢您的任何帮助！
1 回答
侃侃无极
TA贡献2051条经验 获得超10个赞
我不确定，你的代码片段有什么问题，因为你删除的越来越多，我看不到任何错误。
但这应该绝对有效。请参阅我的最小示例：
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<style>
html,
body {
height: 100%;
}
.red {
background-color: red;
}
.blue {
background-color: blue !important;
}
.green {
background-color: green !important;
}
</style>
</head>
<body>
<div id="example">
<div id="bar" v-bind:class="animation">
{{ hello }}
</div>
</div>
<script>
new Vue({
el: '#example',
data() {
return {
hello: "background-div",
animation: "green"
}
},
methods: {
gainAttention(newVal) {
let last = this.animation;
this.animation = newVal;
setTimeout(() => {
this.animation = last;
}, 1000);
}
},
mounted() {
setTimeout(() => {
this.gainAttention("red");
}, 3000);
setTimeout(() => {
this.gainAttention("blue");
}, 5000)
}
})
</script>
</body>
</html>
如果您发布动画/css，我会为您将它们放在一起。
添加回答
举报
0/150
提交
取消