如何解决Vue.js中的2D角色动画，setTimeout问题
我为我找到了一种在Vue.js中创建动画的新方法-2D角色here is a picture的进展：您将每次特定时间移动该图片中的每个角色。解决方案：您将看到角色移动。
我创建了自己的角色。我想在numTotal > 0之后更改此角色的动画。正是我想做的：我的主要动画称为idle，当numTotal > 0想要将动画更改为angry时，两秒钟后动画应切换回我的动画{{1 }}
Vue.js
idle数据
<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吗？
谢谢您的帮助！
解决方法
我不确定，您的代码段出了什么问题，因为您删除的越来越多，所以我看不到任何错误。
但这应该是绝对可行的。请参阅我的最小示例：
<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，我会为您放在一起。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
