vue js 도와주라

[안녕(122.44)]

.fade-enter-active, .fade-leave-active {
transition: opacity 5s;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}<transition name="fade" v-on:after-enter="this.changeEffect">
<img v-if="visible" :src= "items[counter].url"ref="itemRef">
</transition>

이런 식으로 짯는데 transition 도중 버튼을 클릭할 때 transition이 멈추게 하려면 어떤 방식으로 해야할까?