VUE过渡（一)单元素过渡

叁歲伎倆 2022-01-29 13:19 248阅读 0赞

# VUE过渡（一)单元素过渡 #

转载[https://cn.vuejs.org/v2/guide/transitions.html][https_cn.vuejs.org_v2_guide_transitions.html]

## Vue CSS过渡 ##

在进入/离开的过渡中，会有 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-enter-active` 和 `v-leave-active` 可以控制进入/离开过渡的不同的缓和曲线，在下面章节会有个示例说明。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTQ1OTc2OA_size_16_color_FFFFFF_t_70]

//示例
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue过渡</title>
        <style>
        /*demo1 CSS过渡*/
            /*进入、离开过程使用opacity属性，过渡时间2s*/
            .fade-enter-active, .fade-leave-active{ 
                transition: opacity 2s;
            }
            /*进入前、离开后opacity为0，也就是透明*/
            .fade-enter, .fade-leave-to{ 
                opacity: 0;
            }
        /*demo2 CSS过渡*/
            /* 可以设置不同的进入和离开动画*/
            /*设置持续时间和动画函数*/
            .slide-fade-enter-active{ 
                transition: all 2s ease;
            }
            .slide-fade-leave-active{ 
                transition: all 2s cubic-bezier(1.0,0.5,0.8,1.0);
            }
            .slide-fade-enter, .slide-fade-leave-to{ 
                transform: translateX(10px);
                opacity: 0;
            }
        /*demo3 CSS动画*/
            /*css动画用法同css过渡，区别是动画中v-enter类名在节点插入DOM后不会立即删除*/
            /*而是在animationed事件触发后删除*/
            .bounce-enter-active{ 
                animation: bounce-in 1s;
            }
            .bounce-leave-active{ 
                animation: bounce-in 1s reverse;
            }
            /*CSS动画，进入是大小从0-1.5-1*/
            @keyframes bounce-in { 
                0%{ 
                    transform: scale(0);
                }
                50%{ 
                    transform: scale(1.5);
                }
                100%{ 
                    transform: scale(1);
                }
            }
        </style>
    
    </head>
    <body>
        
        <div id="demo1">
            <button @click="show = !show">
                toggle demo1
            </button>
            
            <transition name="fade">
                <p v-if="show">Hello demo1</p>
            </transition>
        </div>
    
        
        <div id="demo2">
            <button @click="show=!show">
                toggle demo2
            </button>
            <transition name="slide-fade">
                <p v-if="show">Hello demo2</p>
            </transition>
        </div>
    
        
        <div id="demo3">
            <button @click="show=!show">
                toggle demo3
            </button>
            <transition name="bounce">
                <p v-if="show">
                    Hello demo3.
                    Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.
                    Mauris facilisis enim libero,
                    at lacinia diam fermentum id.
                    Pellentesque habitant morbi tristique senectus et netus.
                </p>
            </transition>
        </div>
        
        
        
        <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1">
        <div id="demo4">
            <button @click="show =!show">
                toggle demo4
            </button>
            <transition
                name="custom-classes-transition"
                enter-active-class="animated tada"
                leave-active-class="animated bounceOutRight"
            >
                <p v-if="show">Hello demo4</p>
            </transition>
        </div>
    
    
        <script src="vue.js"></script>
        
        <script>
            new Vue({ 
                el:'#demo1',
                data:{ 
                    show:true
                }
            })
        </script>
    
        
        <script>
            new Vue({ 
                el:'#demo2',
                data:{ 
                    show:true
                }
            })
        </script>
    
        
        <script>
            new Vue({ 
                el:'#demo3',
                data:{ 
                    show:true
                }
            })
        </script>
    
        
        <script>
            new Vue({ 
                el:'#demo4',
                data:{ 
                    show:true
                }
            })
        </script>
    </body>
    </html>

### \[显性的过渡持续时间\] ###

> 2.2.0 新增

在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 `transitionend` 或 `animationend` 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。

在这种情况下你可以用 `<transition>` 组件上的 `duration` 属性定制一个显性的过渡持续时间 (以毫秒计)：

你也可以定制进入和移出的持续时间：

## 自定义过渡类名（demo4） ##

我们可以通过以下特性来自定义过渡类名：  
enter-class  
enter-active-class  
enter-to-class (2.1.8+)  
leave-class  
leave-active-class  
leave-to-class (2.1.8+)

他们的优先级高于普通的类名， 这对于 Vue 的过渡系统和其他第三方 CSS 动画库， 如 Animate.css 结合使用十分有用。  
同时使用过渡和动画，Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend ，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。

但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

# Vue 过渡：JavaScript 钩子 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTQ1OTc2OA_size_16_color_FFFFFF_t_70 1]

这些钩子函数可以结合 CSS `transitions/animations` 使用，也可以单独使用。

当只用 JavaScript 过渡的时候，**在 enter 和 leave 中必须使用 done 进行回调**。否则，它们将被同步调用，过渡会立即完成。

**推荐对于仅使用** **JavaScript 过渡的元素添加 `v-bind:css="false"`，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。**

可以在属性中声明 JavaScript 钩子

<transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
      v-on:enter-cancelled="enterCancelled"
    
      v-on:before-leave="beforeLeave"
      v-on:leave="leave"
      v-on:after-leave="afterLeave"
      v-on:leave-cancelled="leaveCancelled"
    >
      
    </transition>
    // ...
    methods: {
      // --------
      // 进入中
      // --------
    
      beforeEnter: function (el) {
        // ...
      },
      // 当与 CSS 结合使用时
      // 回调函数 done 是可选的
      enter: function (el, done) {
        // ...
        done()
      },
      afterEnter: function (el) {
        // ...
      },
      enterCancelled: function (el) {
        // ...
      },
    
      // --------
      // 离开时
      // --------
    
      beforeLeave: function (el) {
        // ...
      },
      // 当与 CSS 结合使用时
      // 回调函数 done 是可选的
      leave: function (el, done) {
        // ...
        done()
      },
      afterLeave: function (el) {
        // ...
      },
      // leaveCancelled 只用于 v-show 中
      leaveCancelled: function (el) {
        // ...
      }
    }

一个使用 Velocity.js 的简单例子：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue javascript钩子函数过渡</title>
    </head>
    <body>
    <div id="example-4">
        <button @click="show = !show">
            Toggle
        </button>
        
        <transition
                v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                v-on:leave="leave"
                v-bind:css="false"
        >
            <p v-if="show">
                Demo
            </p>
        </transition>
    </div>
    
    <script src="vue.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
    <script>
        new Vue({ 
            el: '#example-4',
            data: { 
                show: false
            },
            methods: { 
                //进入前
                beforeEnter: function (el) { 
                    el.style.opacity = 0
                    el.style.transformOrigin = 'left'
                },
                //进入过程中
                enter: function (el, done) { 
                    Velocity(el, {  opacity: 1, fontSize: '1.4em' }, {  duration: 300 })
                    Velocity(el, {  fontSize: '1em' }, {  complete: done })
                },
                //离开过程中
                leave: function (el, done) { 
                    Velocity(el, {  translateX: '15px', rotateZ: '50deg' }, {  duration: 600 })
                    Velocity(el, {  rotateZ: '100deg' }, {  loop: 2 })
                    Velocity(el, { 
                        rotateZ: '45deg',
                        translateY: '30px',
                        translateX: '30px',
                        opacity: 0
                    }, {  complete: done })
                }
            }
        })
    </script>
    </body>
    </html>

## 初始渲染的过渡 ##

可以通过 `appear` 特性设置节点在初始渲染的过渡

这里默认和进入/离开过渡一样，同样也可以自定义 CSS 类名。

自定义 JavaScript 钩子：

在上面的例子中，无论是 `appear` 特性还是 `v-on:appear` 钩子都会生成初始渲染过渡。

[https_cn.vuejs.org_v2_guide_transitions.html]: https://cn.vuejs.org/v2/guide/transitions.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTQ1OTc2OA_size_16_color_FFFFFF_t_70]: /images/20220129/64edcf6f254649e68aee6571bf4e28b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTQ1OTc2OA_size_16_color_FFFFFF_t_70 1]: /images/20220129/62c14de757794f439645bd611734c9b7.png