vue的过渡和动画 | Serena = 阳光果苏 = 自律给我自由

# 在 vue 中使用过渡和动画的步骤

使用条件
该元素是使用了 v-if,v-show 等让元素隐藏或显示的指令
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果
使用 6 个特别的 class 来定制动画

类似于 a 链接的 4 个状态

入场：一个元素从隐藏到显示。有 3 个状态
v-enter 准备入场（隐藏）0%

v-enter-active 入场的过程 1%-99%

v-enter-to 入场完毕（显示）100%

出场：一个元素从显示到隐藏
v-leave 准备出场

v-leave-active 出场的过程

v-leave-to 出场完毕

以上 6 个 class 的前缀 v - 可以改名，后面的是固定写法
比如可以将：

v-enter改为fade-enter
在使用了transition的地方也要其名字才有效
<transition name="fade">
    <div>要动画的元素</div>
</transition>

# 单元素的过渡动画效果

语法：
<transition name = "nameoftransition">
    <div></div>
</transition>
//name可以省略，如果省略，style中的默认前缀是v-

想要让 div 有动画效果，需要在外层包裹一个虚拟标签 transition，然后指定动画名称。

# 多个元素的过渡动画效果

v-if,v-else

https://cn.vuejs.org/v2/guide/transitions.html# 多个元素的过渡

<transition mode="out-in">
    <div class="box" v-if="flag1" key="1">
        GOGGO1111
</div>
<div  class="box2" v-else key="2">
    else的情况
</div>
</transition>

# 一组元素的过渡动画效果（列表过渡）

transition 只包含一个元素，如果要让 transition 包含多个元素，需要使用 transition-group

组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。

如果只是单纯使用依然会出现弹跳效果，而且此时过渡模式（out-in）并不能解决该问题，这时，需要通过 CSS 定位让他们重合一起进行动画，问题的根源依然是因为 transition 进入和离开同时发生的特性。

//解决方法：
   通过给元素设置css的定位属性实现转场动画
    a、将transition改为transition-group,添加class属性，然后让其解析为div标签，设置新生成的div为相对定位：
    比如：<transition-group tag="div" class="box"></transition-group>
    b、给具体的动画元素设置唯一的key属性，如果是动态绑定生成，可以使用:key
    <span v-for="item,i in items" v-bind:key="i" class="list-item">
    {{ item }}
    </span>
    c、添加样式，设置为绝对定位
    比如：.box>span{ position: absolute;top: 0;left: 0}

https://cn.vuejs.org/v2/guide/transitions.html# 列表过渡

# 总结

对单个元素使用过渡（transition 标签最终包裹的是一个元素，包括 v-if,v-else 这种）使用 transition + 过渡模式 + 给元素设置 key 属性或定位
对多个元素使用过渡（transition 标签中需要包裹多个元素，可以是只显示一个元素，其他隐藏），使用 transition-group + 定位解决 + 动态设置唯一 key 属性（该方法同样适用于单元素的过渡）

官网文档：https://cn.vuejs.org/v2/guide/transitions.html

# 结合使用第三方动画库 animate.css

使用第三方动画库的好处就是不用自己写动画了。使用它让动画无敌。

它的使用场景依然是上面的条件渲染，条件展示等场景。

可以使用以下 6 个属性来代替 style 中的 6 个状态：
enter-class
enter-active-class=
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

比如：

比如：
<div id="example-3">
    <button @click="show = !show">
        Toggle render
    </button>
    <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
    >
        <p v-if="show">hello</p>
    </transition>
</div>

# vue 动画实例 - 轮播图


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <title>Vue焦点图</title>
    <link rel="stylesheet" href="css/animate.css">
</head>

<body>


    <style type="text/css">
        /* css 重置 */
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background: #fff;
            font: normal 12px/22px 宋体;
            width: 100%;
        }

        img {
            border: 0;
        }

        a {
            text-decoration: none;
            color: #333;
        }

        a:hover {
            color: #1974A1;
        }

        #footer {
            text-align: center;
            padding-top: 20px;
        }

        /* 本例子css */
        .w3cFocus {
            width: 100%;
            position: relative;
            height: 250px;
            padding: 10px 0;
            background: #292929;
        }

        .w3cFocus .prev,
        .w3cFocus .next {
            position: absolute;
            display: block;
            left: 10px;
            top: 97px;
            width: 46px;
            height: 62px;
            background: url(img/focusAdvBg.png) no-repeat;
            filter: alpha(opacity=80);
            opacity: 0.8;
        }

        .w3cFocus .next {
            left: auto;
            right: 10px;
            background-position: -46px 0;
        }

        .w3cFocus .prev:hover,
        .w3cFocus .next:hover {
            filter: alpha(opacity=100) !important;
            opacity: 1 !important;
        }

        .w3cFocusIn {
            width: 960px;
            height: 250px;
            position: relative;
            margin: 0 auto;
            overflow: hidden;
        }

        .w3cFocusIn .bd ul {
            position: relative;
            height: 250px;
            overflow: hidden;
        }

        .w3cFocusIn .bd li {
            float: left;
            width: 960px;
            vertical-align: middle;
        }

        .w3cFocusIn .bd li img {
            width: 960px;
            height: 250px;
            display: block;
        }

        .w3cFocusIn .hd {
            position: absolute;
            right: 4px;
            bottom: 6px;
        }

        .w3cFocusIn .hd ul {
            vertical-align: middle;
            display: inline-block;
            *display: inline;
            overflow: hidden;
            zoom: 1;
        }

        .w3cFocusIn .hd ul li {
            position: relative;
            float: left;
            display: inline;
            padding-top: 4px;
            margin-right: 6px;
            filter: alpha(opacity=80);
            opacity: 0.8;
            cursor: pointer;
        }

        .w3cFocusIn .hd ul li img {
            width: 76px;
            height: 46px;
            border: 2px solid #fff;
            display: block;
        }

        .w3cFocusIn .hd ul li.on {
            filter: alpha(opacity=100);
            opacity: 1;
            background: url(img/focusArrow.png) center 0 no-repeat;
        }

        .w3cFocusIn .hd ul li.on img {
            border: 2px solid #3499EA;
            border-bottom-width: 4px;
        }
    </style>
    <style>
		/* .v-enter{
            opacity: 0;
        } */
        .v-enter-active{
            animation: fadeIn 1s;
        }
        /* .v-enter-to{
            opacity: 1;
        }
        .v-leave{
            opacity: 1;
        } */
        .v-leave-active{
            animation: fadeOut 0.5s;
        }
        /* .v-leave-to{
            opacity: 0;
        } */
		.abs ul{
            position: absolute;
        }
	</style>
    <div class="w3cFocus" id="slide">
        <div class="w3cFocusIn">
            <div class="bd">
                <ul>
                    <transition-group tag="div">
                    <li v-for="item,index in data" v-show="index==i" :key="index"><a href="#"><img :src="item.bgimg" /></a></li>
                </transition-group>
                    <!-- <li><a href="#"><img src="img/pic2.jpg" /></a></li>
                <li><a href="#"><img src="img/pic3.jpg" /></a></li>
                <li><a href="#"><img src="img/pic4.jpg" /></a></li> -->
                </ul>
            </div>

            <div class="hd">
                <ul>
                    <li v-for="item,index in data" :class="{on:index==i}" @click="cg(index)"><img :src="item.smimg" />
                    </li>
                    <!-- <li><img src="img/pic2_s.png" /></li>
                <li><img src="img/pic3_s.png" /></li>
                <li><img src="img/pic4_s.png" /></li> -->
                </ul>
            </div>
        </div>
        <a class="prev" href="javascript:void(0)" @click="i--,i<0?i=3:''"></a>
        <a class="next" href="javascript:void(0)" @click="i++,i>3?i=0:''"></a>

    </div>
    <script>
        //数据
        var data = [{
                bgimg: "img/pic1.png",
                smimg: "img/pic1_s.png"
            },
            {
                bgimg: "img/pic2.jpg",
                smimg: "img/pic2_s.png"
            },
            {
                bgimg: "img/pic3.jpg",
                smimg: "img/pic3_s.png"
            },
            {
                bgimg: "img/pic4.jpg",
                smimg: "img/pic4_s.png"
            }
        ];
        var vm = new Vue({
            el: "#slide",
            data: {
                //这里放数据
                data,
                i: 0
            },
            methods: {
                //i指的是调用时传进来的那个参数
                cg(i) {
                    this.i = i;
                }
            },

        });
        // 定时轮播
        var timer=setInterval(fun, 1000)
        function fun() {
            vm.i += 1
            if (vm.i > 3) {
                vm.i = 0
            }
        }
        // 移入停止
        var slide=document.getElementById("slide")
        slide.onmouseenter=function(){
            clearInterval(timer)
        }
        // 移出继续
        slide.onmouseleave=function(){
            timer=setInterval(fun, 1000)
        }
    </script>

</body>

</html>

vue