使用Vuejs,页面上某些元素的数据正在发生变化。
但是,用户不理解这一更改。
例如,我通过单击按钮来制作计数器。我将数据作为 {{counter}} 打印到 span 元素。
但是这个变化并没有被用户注意到。我怎样才能给它各种动画?
我尝试组合一个CSS,我发现它有我想要的动画,但没有成功。
Vuejs 文档说你可以使用toggleCss 来做到这一点,但这不是我想要的。
var app=new Vue({
el: "#app",
data: {
myCount:0
}
,
methods: {
btnCount() {
this.myCount+=1
}
}
})
<div id='app'>
<button @click='btnCount'>
+++++
</button>
<span class='myAnimSpan'>{{myCount}}</span>
</div>
span:hover {
animation: shake 0.5s;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
Jsfiddle:https://jsfiddle.net/au4x031g/
最佳答案
您可以使用 Vue 转换(请参阅 https://v3.vuejs.org/guide/transitions-enterleave.html#transitioning-single-elements-components )。
使用 <transition>
标记为 name
,以及带有 key
的元素(对该键的每次更改都会触发转换更新)
<transition name="shaketext">
<span class='myAnimSpan' :key="myCount">{{myCount}}</span>
</transition>
name
property 用于进入/离开事件的 CSS 声明,例如:
.shaketext-enter-active {
animation: shake 0.9s;
}
.shaketext-leave-to, .shaketext-leave-active{
display: none;
}
此外,为了使转换工作,span 元素应该是 block 元素(例如 display:inline-block
)
.myAnimSpan {
display: inline-block;
}
关于vue.js - 如何使用 vuejs 为更改后的元素添加动画效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68808436/