vue.js로 값을 갱신할 때 CSS 애니메이션을 추가하려면 어떻게 해야 합니까?

vue.js로 값을 갱신할 때 CSS 애니메이션을 추가하려면 어떻게 해야 합니까?

vue.js를 사용하여 어레이를 목록으로 렌더링하고 있습니다.

리스트의 각 아이템에는 수치값이 있어 그 값이 변경되면 애니메이션을 사용하고 싶습니다.

애니메이션의 예:

• 기존 가치는 사라지고 새로운 가치는 사라집니다.
• 값 뒤에 있는 노란색 배경은 희미해집니다.
• 텍스트의 색상이 변경되면 원래 텍스트로 페이드백됩니다.

이거 어떻게 해?

HTML

<div id="app">
  <ul>
    <li v-for="user in users">
      {{ user.name }} = {{ user.value }}
    </li>
  </ul>

  <button v-on:click="users[0].value++">Change value</button>
</div>

JS

var app = new Vue({
  el: '#app',
  data:
  {
    users:
    [
      { name: 'Barbara Dwyer', value: 14 },
      { name: 'William B Hardigan', value: 10 }
    ]
  }
})

http://codepen.io/anon/pen/ryxjOE

사용하고 싶을 것이다.:key와 함께<transition>여기 아주 기본적인 데모가 있습니다.

<transition name="slide-fade" mode="out-in">
  <div :key="value">
    {{ value }}
  </div>
</transition>

그리고 나서, 로서value를 변경합니다.slide-fade애니메이션이 사용됩니다.오래된 값을 가진 요소는leave애니메이션 및 새 값을 가진 요소는enter애니매이션.

간단한 데모를 소개합니다.https://jsfiddle.net/jx52bfpc/2/

변경된 값에 따라 키를 사용하여 표준 css 애니메이션을 사용할 수 있습니다.이렇게 하면 이전 요소가 폐기되는 동안 새 요소에 대한 새 애니메이션이 시작됩니다.

new Vue({
  data: {
    value: 5,
  },
  methods: {
    add() {
      this.value++
    },
    subtract() {
      this.value--
    },
    keep() {
      this.value=this.value
    },
  },
}).$mount('#app')

.mycolor {
  background-color: green;
  animation: mymove 5s;
}
@keyframes mymove {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="mycolor" :key="value">
    {{ value }}
  </div>
  <button @click="add">
   Add
  </button>
  <button @click="subtract">
   Subtract
  </button>
  <button @click="keep">
   Keep
  </button>
</div>

언급URL : https://stackoverflow.com/questions/42537359/how-do-i-add-css-animations-when-updating-a-value-with-vue-js