vue的动画

示例一:

<button @click="show = !show">Toggle</button>
    <Transition>
     <p v-if="show">hello</p>
</Transition>

/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;//透明度 过渡时间0.5s ease时间函数(开始结束慢，中间快)
}

.v-enter-from,//动画起始和结束完全透明
.v-leave-to {
  opacity: 0;
}

示例二

.slide-fade-enter-from,
.slide-fade-leave-to {
　　transform: translateX(20px);//进入动画：从右偏移+透明 → 正常位置+不透明   离开动画：正常位置+不透明 → 右偏移+透明
　　opacity: 0;
}

.slide-fade-enter-active {
　　transition: all 0.3s ease-out;//ease-out动画开始快，结束慢
}

 

示例三

.bounce-enter-active {
　　animation: bounce-in 0.5s;
}
.bounce-leave-active {
　　animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {//弹跳效果
0% {transform: scale(0);}//动画开始 尺寸0
50% {transform: scale(1.25);}//一半 尺寸1.25倍
100% {transform: scale(1);}//结束 尺寸正常
}

 

示例四

<transition @after-enter="onEnterComplete">//过渡结束

    <div v-if="show" class="fade-box"></div>
</transition>

<div  class="animated-box"  @animationend="handleAnimationEnd" > 动画元素</div>

<Transition@after-enter="onEnter" @after-leave="onLeave">
      <div v-if="show" class="content">内容</div>
</Transition>