day86-动画与过度

过度与动画

使用vue写一些插入与更新或者移除dom元素时，在合适的时候使用元素动画

方法一

首先设计动画样式：

 @keyframes gugu {
   from{
     transform: translateX(-100%);
   }
   to{
     transform: translateX(0px);
   }
 }

 

使用enter和leave设计进入与离开的动画

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

 

使用动画

<template>
   <div>
     <button @click="isShow = !isShow">显示/隐藏</button>
 <!--    <transition name="hello" :appear="true">-->
     <transition name="hello" appear>
       <h1 v-show="isShow">hello!</h1>
     </transition>
   </div>
 </template>

 

方法二

多个元素需要使用动画时

首先设计动画

 /*进入的起点 离开的终点*/
 .hello-enter,.hello-leave-to{
   transform: translateX(-100%);
 }
 .hello-enter-active,.hello-leave-active{
   transition: 1s linear;
 }
 /*进入的终点 离开的起点*/
 .hello-enter-to,.hello-leave{
   transform: translateX(0);
 }

 

使用transition-group包裹多个渲染元素

 <template>
   <div>
     <button @click="isShow = !isShow">显示/隐藏</button>
 <!--    <transition name="hello" :appear="true">-->
     <transition-group name="hello" appear>
       <h1 v-show="isShow" key="1">hello!</h1>
       <h1 v-show="isShow" key="2">gugu!</h1>
     </transition-group>
   </div>
 </template>

 

方法三

引入snimate.css包使用现成动画

 import 'animate.css'

 

在dom元素上设计动画，有一些固定的格式

 <template>
   <div>
 <!--    <button @click="isShow = !isShow">显示/隐藏</button>-->
 <!--    <transition name="hello" :appear="true">-->
     <transition-group
         name="animate__animated animate__bounce"
         appear
         enter-active-class="animate__rubberBand"
         leave-active-class="animate__backOutUp"
     >
       <h1 v-show="isShow" key="2">hello!</h1>
     </transition-group>
     <transition
       name="animate__animated animate__bounce"
       appear
       enter-active-class="animate__heartBeat"
       leave-active-class=""
     >
       <h1 v-show="isShow" key="2">beautiful girl cmt</h1>
     </transition>
 ​
   </div>
 </template>

 

总结

/*
   vue封装的过度与动画
     1.作用：在插入，更新或移除dom元素时，在合适的时候给元素添加样式类名
     2.写法：
       1.准备好样式：
         元素进入的样式：
           v-enter：进入的起点
           v-enter-active：进入过程中
           v-enter-to：进入的终点
         元素离开的样式：
           v-leave：离开的起点
           v-leave-active：离开过程中
           v-leave-to：离开的终点
         2.使用<transition>包裹要过度的元素，并配置name属性
         <transition name="hello" appear>
           <h1 v-show="isShow">hello!</h1>
         </transition>
         3.若有多个元素需要过度，则需要使用<transition-group>
           且每个元素需要指定key值
 */