vue动画

appear的用法和enter的用法相似，但是它只是在第一次渲染的时候才会起作用

<transition
       appear
       enter-active-class="animate__animated animate__lightSpeedInRight"
       leave-active-class="animate__animated animate__lightSpeedOutRight"
       appear-active-class="animate__animated animate__lightSpeedInRight"
       >
        <div v-if="aniFlag" class="comic">哈哈哈</div>
    </transition>
1
2
3
4
5
6
7
8

也可以同时使用animate和自己定义的动画，
当两者的动画时间不一样时，可以设置type，选择是以transtion还是animation,因为animate用的是animation

    <transition
      type="transition"
      appear
      enter-active-class="animate__animated animate__lightSpeedInRight fade-enter-active"
      leave-active-class="animate__animated animate__lightSpeedOutRight fade-leave-active"
      appear-active-class="animate__animated animate__lightSpeedInRight"
    >
      <div v-if="aniFlag" class="comic">哈哈哈</div>
    </transition>
1
2
3
4
5
6
7
8
9

当然我也可以自己定义动画的总时长,定义duration时长

 <transition
      :duration="5000"
      appear
      enter-active-class="animate__animated animate__swing fade-enter-active"
      leave-active-class="animate__animated animate__shakeY fade-leave-active"
      appear-active-class="animate__animated animate__swing"
    >
      <div v-if="aniFlag" class="comic">哈哈哈</div>
    </transition>
1
2
3
4
5
6
7
8
9

或者更复杂一些,定义入动画和出动画的时长

<transition
      :duration="{enter:5000,leave:5000}"
      appear
      enter-active-class="animate__animated animate__swing fade-enter-active"
      leave-active-class="animate__animated animate__shakeY fade-leave-active"
      appear-active-class="animate__animated animate__swing"
    >
      <div v-if="aniFlag" class="comic">哈哈哈</div>
    </transition>
1
2
3
4
5
6
7
8
9

Vue中的js动画与Velocity.js的结合

vue的transition也有js动画钩子函数

  <transition
     name="fade"
     @before-enter="handleBeforeEnter"
     @enter="handleEnter"
     @after-enter="handleAfterEnter"
    >
      <div v-if="aniFlag" class="comic">哈哈哈</div>
    </transition>

  // 即将显示之前的钩子函数  el是当前元素
    handleBeforeEnter(el){
     el.style.color="blue"
    },
    // 当运行动画的时候
    handleEnter(el,done){
      setTimeout(()=>{
        el.style.color="green"
      },2000)
      setTimeout(()=>{
        done() //动画执行完毕
      },4000)
    },
    // 当done执行完之后,又会触发一个钩子函数
    handleAfterEnter(el){
        el.style.color="black"
    },

同理有入场动画，还有出场动画，出场动画的钩子函数是before-leave、leave、after-leave 用法和入场钩子类似
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Velocity.js的使用

   // 即将显示之前的钩子函数  el是当前元素
    handleBeforeEnter(el){
     el.style.opacity=0
    },
    // 当运行动画的时候
    handleEnter(el,done){
      velocity(el,{opacity:1},{duration:2000,complete:done})
    },
    // 当done执行完之后,又会触发一个钩子函数
    handleAfterEnter(el){
      console.log('====================================');
      console.log('动画结束');
      console.log('====================================');
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

多个元素动画
<–多个元素的动画 in-out先进入后隐藏 out-in先隐藏后进入–>

 
      
哈哈哈
      
666
    

.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 3s;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15