Vue.过渡动画-Vue-前端日记簿

首页 Vue 正文

Vue.过渡动画

2023-07-03 72

1. 什么是过渡动画

当一个元素被transition包裹之后，vue会自动的分析元素的css样式，然后构建一个动画的流程。流程分2块，一块是元素显示的流程，一块是元素隐藏的流程。

vue在插入,更新或者移出DOM时, 提供多种不同方式的应用过渡效果。本质上是使用CSS3动画：transition，animation 去实现的过渡动画效果。

vue为我们提供了 6个类，我们可以在这 6个类中，去自定义我们的 css3效果

进入时 class 的类型分为以下几种

v-enter （过渡的起始点，你在这一刻，设置的类）

v-enter-active （过渡动画的整个过程，修饰过程类）

v-enter-to （过渡的结束的，你在这一刻，设置的类）

离开时 class 的类型分为以下几种

v-leave （离开的起始点，你在这一刻，设置的类）

v-leave-active （离开的过程，修饰过程类）

v-leave-to （离开的结束点，你在这一刻，设置的类）

2. 过渡动画的基本用法

离开动画：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom元素 离开的动画效果</title>
    <style>
        /* 2.向 vue给我们 提供的 6个类中的 某些类 里，写 我们自定义的样式规则 */


        /* dom元素 离开的动画效果（我们看不见它了） */
        .v-leave{
            opacity: 1;
        }
        .v-leave-active{
            /* css3的过渡动画 */
            transition:opacity 5s;
        }
        .v-leave-to{
            opacity: 0;
        }
    </style>
</head>
<body>
    
        
    <div id="app">
        <!--1. 把你 打算要 进行 过渡效果的 dom节点，放置 到 vue内置的（transition）组件中 -->
        <transition name="" mode="">
            <p v-show="isflag">
                <img v-bind:src="pic" alt="">
            </p>
        </transition>


        <button @click="change">点击</button>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                     pic: "./img/leo2.webp",
                    isflag:true
                }
            },
            methods:{
                change(){
                    this.isflag = !this.isflag;
                }
            }
        })
    </script>
</body>
</html>

预览：

2.2 进入动画

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom元素 进入的动画效果</title>
    <style>
        /* 2.向 vue给我们 提供的 6个类中的 某些类 里，写 我们自定义的样式规则 */
        /* 特别注意： vue提供的 6个类， 是在 某些 时间节点，去修饰dom的。当过渡效果完成后，这些类，会从 dom节点上 移除掉。 */


        /* dom元素 进入的动画效果（我们 慢慢的 可以看见它了） */
        .v-enter{
            opacity: 0;
        }
        .v-enter-active{
            /* 过渡动画 */
            transition: opacity 5s;
        }
        .v-enter-to{
            opacity: 1;
        }
    </style>
</head>
<body>
    
        
    <div id="app">
        <!--1. 把你 打算要 进行 过渡效果的 dom节点，放置 到 vue内置的（transition）组件中 -->
        <transition name="" mode="">
            <p v-show="isflag">
                <img v-bind:src="pic" alt="">
            </p>
        </transition>


        <button @click="change">点击</button>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                    pic:'./img/3.jpg',
                    isflag:false
                }
            },
            methods:{
                change(){
                    this.isflag = !this.isflag;
                }
            }
        })
    </script>
</body>
</html>

预览：

2.3 在transition中使用name属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom元素 进入的动画效果</title>
    <style>
        /* 2.向 vue给我们 提供的 6个类中的 某些类 里，写 我们自定义的样式规则 */
        /* 特别注意： vue提供的 6个类， 是在 某些 时间节点，去修饰dom的。当过渡效果完成后，这些类，会从 dom节点上 移除掉。 */


        /* dom元素 进入的动画效果（我们 慢慢的 可以看见它了） */
        .fade-enter{
            opacity: 0;
        }
        .fade-enter-active{
            /* 过渡动画 */
            transition: opacity 5s;
        }
        .fade-enter-to{
            opacity: 1;
        }
    </style>
</head>
<body>
    
        
    <div id="app">
        <!--1. 把你 打算要 进行 过渡效果的 dom节点，放置 到 vue内置的（transition）组件中 -->

        <!-- transition组件 name属性 如果 我们给它 指定了一个名称，那么，我们对应的 6个类的 前缀v-就要改成 fade- -->
        <transition name="fade" mode="">
            <p v-show="isflag">
                <img v-bind:src="pic" alt="">
            </p>
        </transition>


        <button @click="change">点击</button>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                    pic:'./img/3.jpg',
                    isflag:false
                }
            },
            methods:{
                change(){
                    this.isflag = !this.isflag;
                }
            }
        })
    </script>
</body>
</html>

预览：

3. 多元素（列表）过渡动画

多元素动画我们使用 transition-group组件对其进行包裹。在这个组件身上可以添加属性tag="ul" 其中，tag里面的值，可以是你指定要生成的标签。我们想在li的外面指定生成ul标签。我就在tag里写ul。

注意：多元素动画渲染的是，需要设置 v-bind:key="index" 。如果不指定key，元素渲染不出来。

列表过渡

需要绑定唯一的key值,用以区分否则会报错

随机向数组中添加内容，删除内容，并且给其添加 css3过渡动画效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过渡动画效果---优化css部分</title>
    <style>
        .item li{
            display: inline-block;
            margin-right: 15px;
            font-size: 30px;
        }
        .data-enter-active,.data-leave-active{
            transition: all 1s;
        }
        .data-enter,.data-leave-to{
            transform: translateY(30px);
            opacity: 0;
        }

    </style>
</head>
<body>
    
        
    <div id="app">
        <h1>向数组的 随机位置上，去添加内容；或者 把数组的 随机位置上内容，删除掉！</h1>
        <button @click="add">插入</button>
        <button @click="remove">删除</button>
        <hr>
        <transition-group tag="ul" name="data">
            <li v-for="(item,index) in list" v-bind:key="index">
                {{item}}
            </li>
        </transition-group>

    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                    list:[1,2,3,4,5,6,7,8,9],
                    nextNum:10
                }
            },
            created(){
                console.log(this.randomNum());
            },
            methods:{
                // 随机数
                randomNum(){
                    return Math.floor(Math.random()*this.list.length);
                },
                add(){
                    // this.randomNum() --第一个参数：随机位置 ，从这个随机位置上 去 添加内容
                    // 0  -- 第二个参数： 添加
                    // this.nextNum++ -- 第三个参数：你添加的内容
                    this.list.splice(this.randomNum(),0,this.nextNum++)
                },
                remove(){
                    // this.randomNum() --第一个参数：随机位置 ，从这个随机位置上 删除内容
                    this.list.splice(this.randomNum(),1);
                }
            }
        })
    </script>
</body>
</html>

预览：

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=10

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。