Как я могу анимировать несколько элементов внутри цикла V-For в Vuejs - PullRequest
Новая
       8

Как я могу анимировать несколько элементов внутри цикла V-For в Vuejs

0 голосов
/ 02 июня 2018

вот html 

<div id="slider" class="slider" @mousedown="startDrag" @mouseup="stopDrag" @mousemove="mouseMoving" @mouseLeave="stopDrag">
    <div class="slider-cards" :style="`transform: translate3d(${cardsX}px,0,0)`">
      <div class="slider-card" @mouseover="sliderCardOver" @mouseout="sliderCardOut" v-for="(slide, index) in slides" :key="index">
          <div class="img-container">
            <img class="slider-card-img" :src="slide.image" :alt="slide.title" draggable="false"/>
          </div>
          <div class="slider-info">
            <h1>{{slide.title}}</h1>
            <p>{{slide.description}}</p>
            <button class="slider-button">Learn More</button>
          </div>      
      </div>
    </div>
  </div>

вот js 

sliderCardOver(e){
    console.log(e.target)
    TweenMax.to(e.target, .7, {scaleX:1.1, scaleY:1.1, ease:Quad.easeInOut});
    //TweenMax.to('.slider-info h1', .5, {y:'10px', ease:Quint.easeInOut, delay:.2});
},

Я пытаюсь анимировать с помощью tweenMax, элемента img и элементов h1 и p под ним.Я пытался использовать index, я пытался сделать имя класса динамичным, я пытался поместить оба этих div в контейнер div в надежде, что он подхватит это, но пока ничего не получалось.

Любая помощь будет принята с благодарностью.

...