VueJs Enter-transition animation not working on click - css

Question

The code is supposed to take a user's entry in the input box, push it to the end of the "tasks" array when "ADD TASK" 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. "REMOVE TASK" works like it should though.
<template>
<div class="grid-container">
<div class="content">
<h1>To-Do It</h1>
<transition-group name="list" tag="p">
<div
v-for="(item, index) in tasks"
v-bind:item="item"
v-bind:index="index"
v-bind:key="item.id"
>
{{ item.count }}
</div>
</transition-group>
<input type="text" placeholder="Enter a task" v-model="userinput" />
<div>
<p v-bind:class="{ buttondiv: pshow }" v-on:click="addtask">
ADD TASK
</p>
<p v-bind:class="{ buttondiv: pshow }" v-on:click="removetask">
REMOVE TASK
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Todo",
data: function() {
return {
userinput: "",
tasks: [],
show: true,
pshow: true
};
},
methods: {
addtask: function() {
if (this.userinput != "") {
this.tasks.push({ count: this.userinput });
this.userinput = "";
console.log(this.tasks);
} else {
return "failed";
}
},
removetask: function() {
this.tasks.pop(this.userinput);
}
}
};
</script>
<style>
#import "../assets/Todo.css";
.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;
}
</style>