title: VueJs Enter-transition animation not working on click
body: <p>The code is supposed to take a user's entry in the input box, push it to the end of the &quot;tasks&quot; array when &quot;ADD TASK&quot; is clicked which is then displayed using v-for. However, the list-enter-active animation doesn't work. It just snaps into the browser's display instead of easing in. &quot;REMOVE TASK&quot; works like it should though.</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;grid-container&quot;&gt;
      &lt;div class=&quot;content&quot;&gt;
        &lt;h1&gt;To-Do It&lt;/h1&gt;
        &lt;transition-group name=&quot;list&quot; tag=&quot;p&quot;&gt;
          &lt;div
            v-for=&quot;(item, index) in tasks&quot;
            v-bind:item=&quot;item&quot;
            v-bind:index=&quot;index&quot;
            v-bind:key=&quot;item.id&quot;
          &gt;
            {{ item.count }}
          &lt;/div&gt;
        &lt;/transition-group&gt;
  
        &lt;input type=&quot;text&quot; placeholder=&quot;Enter a task&quot; v-model=&quot;userinput&quot; /&gt;
        &lt;div&gt;
          &lt;p v-bind:class=&quot;{ buttondiv: pshow }&quot; v-on:click=&quot;addtask&quot;&gt;
            ADD TASK
          &lt;/p&gt;
          &lt;p v-bind:class=&quot;{ buttondiv: pshow }&quot; v-on:click=&quot;removetask&quot;&gt;
            REMOVE TASK
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: &quot;Todo&quot;,
    data: function() {
      return {
        userinput: &quot;&quot;,
        tasks: [],
        show: true,
        pshow: true
      };
    },
    methods: {
      addtask: function() {
        if (this.userinput != &quot;&quot;) {
          this.tasks.push({ count: this.userinput });
          this.userinput = &quot;&quot;;
          console.log(this.tasks);
        } else {
          return &quot;failed&quot;;
        }
      },
      removetask: function() {
        this.tasks.pop(this.userinput);
      }
    }
  
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  @import &quot;../assets/Todo.css&quot;;
  
  .list-enter-active,
  .list-leave-active {
    transition: all 1s;
  }
  .list-enter,
  .list-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }
  .flip-list-move {
    transition: transform 1s;
  }
  &lt;/style&gt;
  
  </code></pre>