This is a JavaScript code snippet that we used for our blog post https://rubygarage.org/blog/things-vue-takes-from-react-and-angular at RubyGarage. This is an example of animation implementation in Vue.

project.vue

<template>
  <div class='container'>
    <div class='ui form'>
      <div class='field'>
        <div class='ui fluid action input'>
          <input v-model='newTask' type='text' placeholder='Start typing here to create a task...'>
          <button @click='addTask' class='ui green button'>Add Task</button>
        </div>
      </div>
    </div>
 
    <div class='ui relaxed items'>
      <transition-group name='todo-list'>
        <task
          v-for='task in tasks'
          :key='task'
          :task='task'
          :removeTask='removeTask'
          class='todo-list-item'
        />
      </transition-group>
    </div>
  </div>
</template>
 
<script>
import Task from './Task'
 
export default {
  data: () => ({
    tasks: [
      'Crate a vue animation demo',
      'Buy a milk'
    ],
    newTask: ''
  }),
  components: {
    Task
  },
  methods: {
    removeTask (task) {
      const index = this.tasks.indexOf(task)
      this.tasks.splice(index, 1)
    },
    addTask () {
      if (this.newTask === '') return
      this.tasks.push(this.newTask)
      this.newTask = ''
    }
  }
}
</script>
 
<style>
  .container {
    width: 500px;
    margin: auto;
    margin-top: 100px;
  }
  .todo-list-item {
    transition: all 1s;
    width: 500px;
  }
  .todo-list-enter, .todo-list-leave-to {
    opacity: 0;
    transform: translateX(50px);
  }
  .todo-list-leave-active {
    position: absolute;
  }
  .todo-list-leave-active .task-text {
    text-decoration: line-through;
  }
</style>