转自：http://www.pinlue.com/article/2020/09/0916/5311219316405.html
 
 

官网参考：https://animate.style/
 Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡:（下列条件如果有变化就会产生transition过渡效果）
 
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点
 
vue官方动画网址：
 https://animate.style/
 调用地址：
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
 
 
<transition-group>
 
如果我们要同时渲染多个列表，如：我们使用v-for列表过渡时使用 <transition-group>组件进行过渡。
 特点：
 
不同于 <transition>，它会以一个真实元素呈现：默认为一个 。你也可以通过 tag attribute 更换为其他元素。如：<transition-group name="div"></transitiong-group>
过渡模式不可用，因为我们不再相互切换特有的元素。
内部元素总是需要提供唯一的 key attribute 值。
CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。
 
 
vue实现原理：
 当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
 
自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
 
如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
 
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)
 
过渡的类名：
 在进入/离开的过渡中，会有 6 个 class 切换。
 
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
 
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
 
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
 
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
 
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
 
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
 
样式设置：
 
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
 

 示例：
 对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 my-transition-enter。
 
v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线，在下面章节会有个示例说明。
 
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

vue中经常会有v-if条件渲染，v-show显示/隐藏，以及动态组件切换等范围区域的视觉变化，如果没有动画过渡效果，会显得有一些突兀。我们可以使用transition来实现过渡的动画效果。
 
transition的几个css相关设置属性：
 v-enter：过渡1（从无到有）开始前
 v-enter-to：过渡1（从无到有）结束
 v-enter-active：包含v-enter、v-enter-to，在这里可以设置过渡时间、曲线等
 v-leave：过渡2（从有到无）开始前
 v-leave-to：过渡2（从有到无）结束
 v-leave-active：包含v-leave、v-leave-to，在这里可以设置过渡时间、曲线等
 
看图理解：
 
 代码部分
 注：transition标签的name属性的值代替css属性中的"v"。例如上面的v-enter，在设置了name为"fade"后，就变为fade-enter。如果不设置name，则默认为v-enter等。
 
<div @click="flag=!flag">Click me</div>
<transition name="fade">
  <div class="box" v-if="flag"></div>
</transition>
 
.box {
    width: 300px;
    height: 60px;
    background: skyblue;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }


  .fade-enter-to,
  .fade-leave {
    opacity: 1;
  }


  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.6s;
  }

 
 
定时器其实是Timing事件，在制定的时间内执行代码达到一些效果。
 
 
setTimeout(函数，毫秒数):
 
 
 
在指定的毫秒数后执行函数，可以看成一个延迟效果。
 
 
setInterval(函数，间隔毫秒数):
 
 
 
在setTimeout()基础上重复执行此函数
 
 
clearTimeout(setTimeout返回的变量):
 
 
 
停止执行setTimeout()
 
 
clearInterval(setInterval返回的变量):
 
用定时器达到transition效果:
 
<div class="main" id="mydiv"></div>
 
transition：
 
.main{
            background-color: red;
            width: 100px;
            height: 100px;
            margin-top: 100px;
            transition: transform 0.5s linear,background-color 0.5s linear;
}
.main:hover{
            background-color: blue;
            transform: translateX(200px);
}
 
 
定时器：
 
<script>
        var mydiv=document.getElementById("mydiv");
        var t=null;//前进定时器
        var b=null;//后退定时器
        document.getElementById("btn").onclick=function (){
            t=setInterval(move,50);
            function move(){
                clearInterval(b);
                mydiv.style.marginLeft=mydiv.offsetLeft+10+"px";
                if(parseInt(mydiv.style.marginLeft)>200)
                {
                    clearInterval(t);
                    b=setInterval(back,50);
                }
            
            }
             function back()
             {
                clearInterval(t);
                mydiv.style.marginLeft=mydiv.offsetLeft-10+"px";
                if(parseInt(mydiv.style.marginLeft)<1)
                {
                    clearInterval(b);
                    t=setInterval(move,50);
                }
             }
        }
    </script>