如何使用 vuejs 为更改的元素设置动画？答案

【问题标题】：How can I animate the changed element with vuejs?如何使用 vuejs 为更改的元素设置动画？
【发布时间】：2021-08-16 19:44:25
【问题描述】：

使用 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.js animation vuejs2 change-data-capture

【解决方案1】：

您可以使用 Vue 转换（请参阅https://v3.vuejs.org/guide/transitions-enterleave.html#transitioning-single-elements-components）。

使用带有name 的<transition> 标记和带有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;
}

https://jsfiddle.net/udctfs49/1/

【讨论】：