vue.js通过CSS过渡向下滑动

Question

我想通过CSS过渡来向下滑动，但是向下滑动无法正常工作，因为我在数组中有数据，并用v-for填充了它。我还使用称为卡的ref来访问脚本代码中v-for循环中的元素。

 <v-card class="x" ref="cards" v-for="task in tasks" :key="task.title">
      <v-layout row wrap align-center justify-center>
        <v-flex>
          <v-img :src="task.imageurl" hieght="100px" width="111px" contain></v-img>
        </v-flex>
        <v-flex>
          <v-card-text>
            <a href="#">{{ task.title }}</a>
          </v-card-text>
        </v-flex>
        <v-flex>
          <v-icon large>play_circle_filled</v-icon>
        </v-flex>
      </v-layout>
    </v-card>

添加第二个CSS类的代码

 mounted() {
           this.$refs.cards[0].$el.classList.add('y')
          },     

样式

<style scoped>
.x {
  color: purple; 
  margin: auto;
  margin-bottom: 10px;
  text-align: center;
  overflow: hidden;
  transition: all 5s ease-in-out;
 max-height: 0px;
  display: block;
}
.y {
  max-height: 1000px;
}
</style>