Vue—动画效果、过渡效果、多个元素过度（transition-group）、集成第三方库

怼烎@ 2024-04-07 16:01 60阅读 0赞

**目录**

总结

一、动画效果

二、过渡效果

三、多个元素过度transition-group

四、集成第三方动画

动画库

安装

引入

使用

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

##  ##

## 总结 ##

![c1572c846b7840caa4216eaa1e0d2a8c.png][]

![3fb2af462b404fe1b9ca0e9765b5eb2f.png][]

##  ##

## 一、动画效果 ##

![3be1bc899c664055be4329ed5aa2dbf4.png][]

当我们点击按钮之后，这个黄色的条幅会隐藏

![17bcf93fd62a451298c3c455cdcae54c.png][]

<template>
        <div>
            <button @click="isShow = !isShow">显示/隐藏</button>
            
            
            
            <transition  name="hello" appear>
            
            <h1 v-show="isShow">你好啊！</h1>
            </transition>
        </div>
    </template>
    
    <script>
    
    
    export default {
        name:'Test',
        data(){
            return{
                isShow:true
            }
        }
    }
    </script>
    
    <style scoped>
        h1{
            background-color:orange ;
        }
        /* 进入时候的动画 
        .v-enter-active{
            animation: atguigu 1s;
        }
        /*出去时候的动画  
        .v-leave-active{
            /* 执行atguigu动画1秒钟   reverse是反转的意思 
            animation: atguigu 1s  reverse;
        } */
    
    
        /* 当我们给transition一个属性name时，我们应该把v换成name */
        /* 进入时候的动画 */
        .hello-enter-active{
            animation: atguigu 1s;
        }
        /*出去时候的动画*/  
        .hello-leave-active{
            /* 执行atguigu动画1秒钟   reverse是反转的意思 */
            animation: atguigu 1s  reverse;
        } 
        
        /* 定义一个动画 */
        @keyframes atguigu{
           from{
            /* 从左边而来 */
            /* transform: translateX(-100px); */
            transform: translateX(-100%);
           }
           to{
            transform: translateX(0px);
           }
        }
    </style>

## 二、过渡效果 ##

效果图和上面一模一样

![58cb72fe0e0a4a47835f3128de003fb5.png][]

<template>
        <div>
            <button @click="isShow = !isShow">显示/隐藏</button>
            
            
            
            <transition  name="hello" appear>
               
               <h1 v-show="isShow">你好啊！</h1>
            </transition>
        </div>
    </template>
    
    <script>
    
    
    export default {
        name:'Test',
        data(){
            return{
                isShow:true
            }
        }
    }
    </script>
    
    <style scoped>
        h1{
            background-color:orange ;
            /* 尽量不要在这里写，破坏原有的样式 */
            /* transition: 0.5s linear; */
        }
        
        /* 离开和进入的时候动画怎么做 */
        .hello-enter-active,.hello-leave-active{
          /* linear匀速 */
          transition: 0.5s linear;
        }
        
        /* 进入的起点 : 就是刚进入的时候，还没有进入
        离开的终点*/
        .hello-enter , .hello-leave-to{
            transform: translateX(-100%)
        }
    
        /* 进入的终点；在这一瞬间就完成了进入刚搞进入
           离开的起点  */
        .hello-enter-to ,  .hello-leave{
            /* 完全展示到页面上，也就是没有位移 */
            transform: translateX(0px)
        }
    /* 
        离开的起点 
        .hello-leave{
            transform: translateX(0px)
        }
    
        离开的终点
        .hello-leave-to{
    
            transform: translateX(-100%)
        } */
    
    
    
    </style>

## 三、多个元素过度transition-group ##

修改代码，我们再放一个标签于transition中，我们发现会报错，此标签中只能放单个标签

![1c823963e6aa4764bce812c042e58930.png][]

![d11492d1da194412a01edc3ea0a255a9.png][]

我们再修改一下代码

<transition-group  name="hello" appear>
               
               <h1 v-show="isShow" key="1">你好啊！</h1>
               <h1 v-show="isShow" key="2">小张！</h1>
            </transition-group >

其他代码和上面一个样

![dce0a57294804700aee4a1faa88f0bd4.png][]

##  ##

## 四、集成第三方动画 ##

### 动画库 ###

需要什么动画可以在里面复制

[Animate.css | A cross-browser library of CSS animations.][Animate.css _ A cross-browser library of CSS animations.]

### 安装 ###

![8fa7104ab938402bb82fdf3c5d001239.png][]

### 引入 ###

import  'animate.css'

### 使用 ###

<template>
        <div>
            <button @click="isShow = !isShow">显示/隐藏</button>
    
            <transition-group  
              name="animate__animated animate__bounce" 
              appear
               enter-active-class="animate__swing"
               leave-active-class="animate__backOutUp"
               >
               
               <h1 v-show="isShow" key="1">你好啊！</h1>
               <h1 v-show="isShow" key="2">小张！</h1>
            </transition-group >
        </div>
    </template>
    
    <script>
     import  'animate.css'
    
    export default {
        name:'Test',
        data(){
            return{
                isShow:true
            }
        }
    }
    </script>
    
    <style scoped>
        h1{
            background-color:orange ;
            /* 尽量不要在这里写，破坏原有的样式 */
            /* transition: 0.5s linear; */
        }
        
    
    
    </style>

摇摇晃晃的进来

![2d4ded37cd134093be3605f3e29a81be.png][]

凑得一下子出去

![d9040f8737114206a486ca47059eb05c.png][]

[c1572c846b7840caa4216eaa1e0d2a8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3a86d5d9d10045728da91e212b6db8b5.png
[3fb2af462b404fe1b9ca0e9765b5eb2f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/4d172255304640d6a2591c702234bbc2.png
[3be1bc899c664055be4329ed5aa2dbf4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8a234febed4a468f98761a174c9372fa.png
[17bcf93fd62a451298c3c455cdcae54c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/bfcb247bcbf1464c8ebfcfe9d1383516.png
[58cb72fe0e0a4a47835f3128de003fb5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/de78496b72d14f438d6a2ea232e715fd.png
[1c823963e6aa4764bce812c042e58930.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/5ecc3ff9c7dc4bb191f599636a642218.png
[d11492d1da194412a01edc3ea0a255a9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/a872b0dbd5424f39828d009ae8f128ab.png
[dce0a57294804700aee4a1faa88f0bd4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/1439a14cc6a64664bd49abe2bfc5fa68.png
[Animate.css _ A cross-browser library of CSS animations.]: https://animate.style/
[8fa7104ab938402bb82fdf3c5d001239.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/4ff1725833ad4003befef51ab2d743df.png
[2d4ded37cd134093be3605f3e29a81be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/66f24b66e75f4cde98d7b85b1850e026.png
[d9040f8737114206a486ca47059eb05c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/4ee5694173094ef4be32723cbc363da3.png