Vue 过渡效果的组件

左手的ㄟ右手 2022-12-28 01:59 164阅读 0赞

### 目录 ###

*  1. 单节点的过渡
 *   *  1.1 应用场景
     *  1.2 定义过渡效果的方式

--------------------

# 1. 单节点的过渡 #

## 1.1 应用场景 ##

**Vue** 提供了**标签**为 transition 的 **内置组件**，在：

*  元素或组件初始渲染时；
 *  元素或组件显示/ 隐藏时(使用`v-if` 或早`show` 进行条件渲染时)；
 *  元素或组件切换时。

我们可以给任何元素和组件添加进入/ 离开时的过渡动画。

## 1.2 定义过渡效果的方式 ##

Vue 允许用户使用 CSS 和 JS 两种方式来定义过渡效果。

1.  **使用 CSS 过渡**：需预置符合Vue 规则的带样式的类名（用于定义过渡不同阶段时的样式:）
    
    <table> 
     <thead> 
      <tr> 
       <th>类名</th> 
       <th align="left">说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>v-enter</td> 
       <td align="left">定义进入过渡的开始状态。在元素被插入前生效，被插入后的下一帧移除。</td> 
      </tr> 
      <tr> 
       <td>v-enter-active</td> 
       <td align="left">定义进入过渡生效时的状态o 在整个进入过渡阶段中应用，在元素被插入之前生效，在过渡/ 动画完成之后移除。这个类可以用来定义进入过渡的过程时间、延迟和曲线函数等。</td> 
      </tr> 
      <tr> 
       <td>v-enter-to</td> 
       <td align="left">( Vue 2. l. 8 及以上版本)定义进入过渡结束时的状态。在元素被插入后的下一帧生效(此时v-enter 被移除) ，在过渡/ 动画完成之后移除。</td> 
      </tr> 
      <tr> 
       <td>v-leave</td> 
       <td align="left">:定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。</td> 
      </tr> 
      <tr> 
       <td>v-leave-active</td> 
       <td align="left">定义离开过渡生效时的状态o 在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/ 动画完成之后移除。这个类可以被用来定义离开过渡的过程时间、延迟和曲线函数。</td> 
      </tr> 
      <tr> 
       <td>v-leave-to</td> 
       <td align="left">( Vue 2.1.8 版及以上版本)定义离开过渡的结束状态o 在离开过渡被触发之后下一帧生效(此时机leave 被移除)，在过渡/ 动画完成之后移除。</td> 
      </tr> 
     </tbody> 
    </table>
    
    当实例中存在多个不同的动画效果时，我们可以使用自定义前缀替`v-`， 比如使用 slide-enter 替换 v-enter ， 不过这需要赋予`transition`元素`name`属性。
    
    > name(类型为string）：用于自动生成 CSS 过渡类名。例如：name: ‘fade’ 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 “v”
    
    过渡执行的各种阶段和作用，举例示意如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70]  
    迸出过渡时（ transition ）效果如下：  
    ![在这里插入图片描述][20201214112649318.gif_pic_left]

*  **使用 css 中的 animation** 或第三方动画库 **Animate.css**
    
        
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
        
        
        <h1 class="animated bounce">弹簧动效</h1>
    
    ![在这里插入图片描述][20201214120939212.gif_pic_left]  
    由于这些动画库有着不同的类名规则，无法与Vue 默认的类名规则配合使用， 因此Vue 为其提供了兼容方案，允许用户自定义过渡的类名， 这些类名的优先级将高于默认的类名。  
      
    
    
     *  **自定义过渡类名**
        
        我们可以使用以下特性来自定义过渡类名：
        
         *  `enter-class`
         *  `enter-active-class`
         *  `enter-to-class`
         *  `leave-class`
         *  `leave-active-class`
         *  `leave-to-class`  
              
            
            
            【案例效果】：  
            ![在这里插入图片描述][20201214153411178.gif_pic_left]  
            —— 由于动画模式设置不够准确，两者的运行结果略有差异。
            
            【案例代码】：
            
                <!DOCTYPE html>
                <html lang="en">
                
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>Document</title>
                    
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
                    
                    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
                    <style> div { width: 380px; height: 130px; margin: 100px auto; padding-left: 50px; border: 1px solid blueviolet; color: blueviolet; font-size: 24px; line-height: 130px; text-align: left; } .inline-block { display: inline-block; } .rotate-enter-active { animation: selfRotateIn 500ms; } .rotate-leave-active { animation: selfRotateOut 500ms; } /*命名避免与Animate.css 冲突*/ @keyframes selfRotateln { 0% { opacity: 0; transform: rotateZ(-180deg) } 100% { opacity: 1; transform: rotateZ(0deg) } } @keyframes selfRotateOut { 0% { opacity: 1; transform: rotateZ(0deg) } 100% { opacity: 0; transform: rotateZ(-180deg) } } </style>
                </head>
                
                <body>
                    <div id="app">
                        <button @click="isHidden =!isHidden">{
                         {isHidden ? '点击显示':'点击隐藏'}}</button>
                        
                        <transition name="rotate">
                            <span class="inline-block" v-if="!isHidden">自定义动画</span>
                        </transition>
                
                        
                        <transition name="custom" enter-active-class="animated rotateIn" leave-active-class="animated rotateOut">
                            <span class="inline-block" v-if="!isHidden"> animate.css </span>
                        </transition>
                    </div>
                
                    <script> var vm = new Vue({ el: '#app', data() { return { isHidden: true, } } }) </script>
                </body>
                
                </html>
            
            在开发中，使用进入过渡便可实现初始渲染时的过渡效果。除此之外，Vue 提供了专门的初始渲染过渡，这需要在transition元素上添加`appear`属性。
            
            **注意**：`appear`过渡 只支持自定义类名的过渡和JS 过渡，用法如下：
            
                <transìtìon appear appear-class="custom-appear-class" appear-to-class="custom-appear-to-class" appear-active-class="custom-appear-active-class" >
                	
                </transition>
            
            当需要显示 / 隐藏多个相邻的相同标签的元素时，需要赋予元素唯一 key 值，让Vue对元素进行跟踪。
            
            当元素key 值发生变化时，Vue 不会复用原有的元素，而将重建新元素。根据这一特点，就可以通过改变元素的 key 值来触发过渡动画，这常被用在元素切换时。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70]: /images/20221120/560f60dfbbe0444e81c3019e8afa1249.png
[20201214112649318.gif_pic_left]: /images/20221120/ec14a082ae0e43a98b99e19d8401ef6a.png
[20201214120939212.gif_pic_left]: /images/20221120/f0a413eef87441969017516475b547d0.png
[20201214153411178.gif_pic_left]: https://img-blog.csdnimg.cn/20201214153411178.gif#pic_left