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.

task.vue

<template>
  <div>
    <div class='item'>
      <div class='middle aligned content'>
        <div class='ui fitted checkbox'>
          <input @click='removeTask(task)' type='checkbox'>
          <label></label>
        </div>
        <span class='task-text'>{{task}}</span>
      </div>
    </div>
    <div class='ui divider'></div>
  </div>
</template>

<script>
export default {
  props: ['task', 'removeTask']
}
</script>

<style>
.item {
  padding: 5px 0;
  line-height: 30px;
}
.task-text {
  vertical-align: middle;
  margin-left: 5px;
}
</style>