vue中transition标签如何使用

概述

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：

• 在 CSS 过渡和动画中自动应用 class
• 可以配合使用第三方 CSS 动画库，如 Animate.css
• 在过渡钩子函数中使用 JavaScript 直接操作 DOM
• 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

transition标签使用

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点
  这里是一个典型的例子：
  HTML部分:

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

JS部分:

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

CSS部分:

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
2. 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
   

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 my-transition-enter。

v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线。

CSS 过渡

常用的过渡都是使用 CSS 过渡。
下面是一个简单例子：
HTML部分:

<div id="example-1">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>
</div>

JS部分:

new Vue({
  el: '#example-1',
  data: {
    show: true
  }
})

CSS部分:

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.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 提供了 过渡模式
in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。

<transition name="fade-transform" mode="out-in">
      <keep-alive v-if="isRouterAlive && $route.meta.keepAlive">
        <router-view/>
      </keep-alive>
      <router-view v-if="isRouterAlive && !$route.meta.keepAlive" />
    </transition>

因此我们需要在transition标签中添加mode来达成效果：
希望此篇文章对你有帮助,详细内容可以查看官方文档.

由于我们使用vue时，也要适当的添加不同方式的应用过渡效果。但有时会遇到这样的问题。

这是一种情况

另一种情况


解决方法：将每个transition和button再用一个盒子包起来

但是：我们会发现:

那么：transition标签或transition-group标签

①
transition 只能满足单个节点的过渡效果，在多个节点的渲染上显得力不从心。
为了更好适用于更多的场景，vue 提供 transition-ground来多个元素的过渡。
②
transition-group 拥有transition所有属性
transition本身不会渲染出元素
但是transition-group 会渲染出元素节点；
③
1）在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup
2） 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性
3）通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签

 <transition-group appear tag="ul">
        <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
            {{item.name}}
        </li>
 </transition-group>

但是当我们把将transition标签改成transition-group标签之后，发现控制台里依然有错误提示—当transition-group里有多个元素时，需要给每个元素设置key值，并且每个key值是不能一样的。设置完后，页面就恢复正常了。

一、Vue中的过度动画(无name属性的transition)

vue提供了一个过渡动画的标签transition:
1.只能对一个元素有效
2.主要是给v-if(v-show)或动态组件,在切换的时候添加动态效果.
动画进入前的三个类 1. .v-enter 2…v-enter-active 3…v-enter-to (1.进入,2.进入过程,3.进入后)
动画离开的是哪个类 1. .v-leave 2…v-leave-active 3…v-leave-to (1.离开 2.离开过程 3.离开后)

CSS样式如下:

 <style>
        .div {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
        /* 添加过渡效果 */
        /* 元素显示/入场的时候 */
        
        .v-enter {
            /* 元素在入场开始的样式 */
            opacity: 0;
            height: 0;
        }
        
        .v-enter-active {
            /* 元素入场进行时的样式 设置过度的时间*/
            transition: all 3s;
        }
        
        .v-enter-to {
            /* 元素在入场结束的样式 */
            opacity: 1;
            height: 200px;
        }
        /* 元素隐藏/离场的时候 */
        
        .v-leave {
            /* 元素隐藏的开始的时候 */
            opacity: 1;
            height: 200px;
        }
        
        .v-leave-active {
            /* 元素隐藏的过程 */
            transition: all 3s;
        }
        
        .v-leave-to {
            /* 元素隐藏的结束的时候 */
            opacity: 0;
            height: 0px;
        }
        
        .div2 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
       
    </style>

DOM结构如下:

 <div id="app">
        <button @click="show=!show">show/hide</button>
        <!-- 第一个transition -->
        <transition>
            <div v-show='show' class="div">淡入淡出的效果</div>
        </transition>

    </div>

JS代码如下

<script>
	//创建实例
    var app = new Vue({
        el: '#app',
        data: {
            show: false
        },
    })
</script>

二、Vue中的过度动画(有name属性的transition)

CSS类的样式实现

	 /* 其中样式相同的transition类可以进行和并 */
        
        .fade-enter,
        .fade-leave-to {
            transform: translateX(400px);
        }
        
        .fade-enter-active,
        .fade-leave-active {
            transition: all 3s;
        }
        
        .fade-enter-to,
        .fade-leave {
            transform: translateX(0px);
        }
        

tansition标签添加动画的标签

 <div id="app">
        <!-- vue提供了一个过渡动画的标签transition: 
            1.只能对一个元素有效 
            2.主要是给v-if(v-show)或动态组件,在切换的时候添加动态效果.  -->
        <button @click="show=!show">show/hide</button>
        <!-- 第二个transition: name属性可以区分不同元素的过度动画-->
        <transition name="fade">
            <div v-show='show' class="div2">淡入淡出的效果</div>
        </transition>
    </div>
    

JavaScript代码

<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: false
        },

    })
</script>

三、Vue中的关键帧动画

CSS样式如下:

 <style>
        @keyframes leaveAnimation {
            0% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(-90deg);
            }
            100% {
                transform: translate(-100px, 0) rotate(-90deg);
            }
        }
        
           /*添加animation动画的类*/
        .leaveAni {
            animation: leaveAnimation 3s;
        }
        
        @keyframes enterAnimation {
            0% {
                transform: translate(-100px, 0) rotate(-90deg);
            }
            50% {
                transform: rotate(-90deg);
            }
            100% {
                transform: translate(0, 0) rotate(0deg);
            }
        }
        
         /*添加animation动画的类*/
         
        .enterAni {
            animation: enterAnimation 2s;
        }
        
        .d1 {
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
    </style>

DOM结构如下

<div id="app">
        <input type="checkbox" v-model="show">
        <transition enter-active-class="enterAni" leave-active-class="leaveAni">
            <!-- enter-active-class="" 元素入场的动画类   leave-active-class="" 元素离场的动画类-->
            <div v-show='show' class="d1">4654654</div>
        </transition>
    </div>

JS代码

<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: false
        },

    })
</script>

四、vue中的js动画

Vue官网的JS动画钩子

CSS样式代码

 <style>
        .d1 {
            width: 100px;
            height: 100px;
            background-color: rgb(209, 119, 9);
        }
    </style>

DOM结构

 <div id="app">
        <!--@before-enter="" 在元素显示(入场)之前的钩子  @enter="" 在元素显示(入场)过程的钩子  
            @before-leave="" 在元素隐藏(离场)之前的钩子  @leave="" 在元素隐藏(离场)过程的钩子
        
        -->
        <input type="checkbox" v-model="show">
        <transition @before-enter="showBefore" @enter="enter" @before-leave="hideLeave" @leave="leave">
            <div v-show='show' class="d1">4654654</div>
        </transition>
    </div>

Vue中的JS动画设置(用到了js动画钩子)

 var app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            //动画钩子
            showBefore(el) {
                //el就是做动画的元素
                el.style.opcity = 0; //设置显示之前的样式
            },
            enter(el, done) {
                // el 是触发动画的元素 
                // done是一个函数,当一个动画结束的时候需要手动调用done (保证动画结束)
                // el.style.opcity += 0.1
                function updata() {
                    el.style.opcity = el.style.opcity * 1 + 0.01024
                    if (el.style.opcity * 1 < 1) {
                        requestAnimationFrame(updata)
                    } else {
                        //动画结束调用done终止动画
                        done()
                    }
                };
                updata()
            },
            hideLeave(el) {
                el.style.opcity = 1
            },
            leave(el, done) {

                function update() {
                    el.style.opcity = el.style.opcity * 1 - 0.01024
                    if (el.style.opcity * 1 > 0) {
                        requestAnimationFrame(update)
                    } else {
                        //动画结束调用done终止动画
                        done()
                    }
                };
                update()
            }

        },
    })