vue.js скользит вниз с переходом css - PullRequest
Новая
       14

vue.js скользит вниз с переходом css

0 голосов
/ 28 июня 2019

Я хочу сделать слайд с переходом 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>
...