vue.js - 如何使用 vuejs 为更改的元素设置动画?
问题描述
使用 Vuejs,页面上某些元素的数据正在发生变化。
但是,用户不理解这种变化。
例如,我正在通过单击按钮来制作计数器。我将数据打印为 {{counter}} 以跨越元素。
但是这种变化不会被用户注意到。我怎样才能给它各种动画?
我试图结合一个我发现有我想要的动画的 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
属性用于进入/离开事件的 css 声明,例如:
.shaketext-enter-active {
animation: shake 0.9s;
}
.shaketext-leave-to, .shaketext-leave-active{
display: none;
}
此外,为了使转换工作,span 元素应该是一个块元素(display:inline-block
例如)
.myAnimSpan {
display: inline-block;
}
推荐阅读
- postgresql - R2DBC 和枚举 (PostgreSQL)
- javascript - 如何找到 iframe 的有效链接?
- c# - Swagger 没有找到 ApiVersion 的操作
- c++ - 这个额外的关键字在这个 c++ 类声明中是什么意思?
- java - 测量哪些 Java 代码需要很长时间才能编译
- angular - 为什么在 Angular 8 中生成服务时出现“错误 TS1005: 'from' expected”
- r - R 通过子集和添加两列改进代码
- rest - 使用 Atomikos 事务管理器通过 Spring Boot 实现跨远程 REST 服务的分布式事务
- javascript - 使用控制器和 javascript 从服务器下载文件
- r - R - 计算出现在数据框中的列表中单词的总出现次数,并分组