vue如何点击触发动画效果

Question

            <div v-for="img in imgArr" ref="listGroup">
              <img :src="img.src" alt="" class="imgArr">
            </div>
            
            <button></button>

如何我点击这个按钮，所有图片都会向下动画平移，并且这个平移动画次数能触发多次

我的方法是点击触发方法：
this.$refs.listGroup.style.transform = translate3d(${scrollWidth}px,${scrollHeight}px,0)
但是style是undifined，应该如何写

Answer 1

不能点击的时候给图片加一个class吗

Answer 2

transition内置组件，请参考
链接描述

类似代码

<transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
        <div class="ball" v-show="ball.show">
            <div class="inner inner-hook"></div>
        </div>
</transition>

下面就是操作css

beforeDrop (el) {},
dropping (el, done) { },
afterDrop (el) {  }

Answer 3

this.$refs.listGroup 是一个数组, 可以循环加class