How can I animate the changed element with vuejs?

Question

Using Vuejs the data of some elements on the page is changing.

However, this change is not understood by the user.

For example, I am making a counter by clicking a button. I am printing data as {{counter}} to span element.

But this change is not noticed by the user. How can I give it various animations?

I tried to combine a css that I found have an animation I wanted, but was unsuccessful.

The Vuejs documentation says you can do it with toggleCss, but that's not what I want.

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/

F.Igor · Accepted Answer · 2021-08-16T22:57:19.037

You can use Vue transitions (see https://v3.vuejs.org/guide/transitions-enterleave.html#transitioning-single-elements-components).

Using a <transition> tag with name, and the element with key (each change to that key will trigger a transition update)

<transition name="shaketext">
<span class='myAnimSpan' :key="myCount">{{myCount}}</span>
</transition>

The name property is used for css declarations for enter/leave events, for example:

.shaketext-enter-active {
  animation: shake 0.9s;
}
.shaketext-leave-to, .shaketext-leave-active{
  display: none;
}

Also, to make transforms work, the span element should be a block element (display:inline-block for example)

.myAnimSpan {
  display: inline-block;
}

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

How can I animate the changed element with vuejs?

1 Answers1