Vue.js 中的二维角色动画，setTimeout 问题
我找到了一种在 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回答
-
侃侃无极
我不确定，你的代码片段有什么问题，因为你删除的越来越多，我看不到任何错误。但这应该绝对有效。请参阅我的最小示例：<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，我会为您将它们放在一起。
随时随地看视频慕课网APP
相关分类
JavaScript