多元素过渡

使用方法

1.编写template模板

1
2
3
4
5
6
<transition-group name="animate__animated animate__bounce" appear enter-active-class="animate__swing"
   leave-active-class="animate__backInUp">
     <h1 v-show="isShow" key="1">你好啊!</h1>
     <h1 v-show="!isShow"  key="2">你好啊!尚硅谷</h1>

   </transition-group>

由于是多个,所以transition-group标签下的元素需要加上key属性

2.写对应的style

1
2
3
4
5
6
7
8
9
10
11
.hello-enter,.hello-leave-to{
  transform: translateX(-100%);
}

.hello-enter-active,.hello-leave-active {
  transition: 0.5s linear
}

.hello-enter-to,.hello-leave{
  transform: translateX(0);
}