如何在Vuejs中为v-for循环内的多个元素设置动画

Question

这是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元素进行动画处理。我已经尝试过使用索引，我已经尝试使类名称变得动态，我已经尝试将这两个div放在容器div中，希望它能够接受它，但到目前为止还没有任何工作。 / p>

非常感谢任何帮助。