我发现了一种在Vue.js中创建动画的新方法-2D角色这里是一张图片。进度：你将在每个特定时间移动图片中的每个角色。解决方案：你会看到角色在移动。
我创造了自己的性格。我想在numTotal > 0之后更改此角色的动画。正是我想做的：我的主动画名为idle，当numTotal > 0想要将动画更改为angry时，2秒后动画应该切换回我的动画idle
Vue.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吗？
谢谢你的帮助！
我不确定你的代码段出了什么问题，因为你删除了越来越多的代码，我看不到任何错误。
但这应该是绝对有效的。请参阅我的最小示例：
<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，我会把它们放在一起。