动画效果

使用方法

1.template中写这个

1
2
3
<transition name="hello" appear>
    <h1 v-show="isShow" >你好啊!</h1>
  </transition>

2.style中写动画的各种效果

包含开始前中后三个部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@keyframes atguigu {
   from{
     transform:translateX(-100px)
   }to {
   transform:translateX(0)
        }
 }

 .hello-enter-active {
   animation: atguigu 1s;
 }
 .hello-leave-active{
   animation: atguigu 1s reverse;
 }