zoukankan      html  css  js  c++  java
  • Vue过渡动画—Vue学习笔记

    要求:要通过Vue使用过渡动画我们要把需要过度的元素放在<transition name='变量名'></transition>中。

    原理:通过在特定的时刻增加/移除样式实现。

    一、Vue中的过度效果

    1.未声明name,Vue默认添加/移除v-enter,v-leave-to,v-enter-active,v-leave-active来实现

    v-enter决定元素在加入dom时的样式

    v-enter-active决定样式执行状态

    v-leave-to对应移除的

    实例:为元素添加显示隐藏的过度效果

    <style>
            .v-enter,.v-leave-to{
                opacity: 0;
            }
            .v-enter-active,.v-leave-active{
                transition: opacity 1s;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <transition>
                <h3 v-if="show">Hi Boy</h3>
            </transition>
            <button @click="handleClick">DoIt</button>
        </div>
    </body>
    <script>
    
        var app=new Vue({
            el:'#app',
            data:{
                show:true
            },
            methods:{
                handleClick:function(){
                this.show=!this.show
                }
            }
        })
    </script>

    2.如果声明了对应的name则可以改写为

    css:

    <style>
            .fade-enter,.fade-leave-to{
                opacity: 0;
            }
            .fade-enter-active,.fade-leave-active{
                transition: opacity 1s;
            }
        </style>

    html:

    <div id="app">
            <transition name="fade">
                <h3 v-if="show">Hi Boy</h3>
            </transition>
            <button @click="handleClick">DoIt</button>
        </div>

    二、Vue中的动画效果

    1.使用自定义动画

    html不变,关键是css变为如下

    @keyframes myfade{
            from{opacity: 0}
            to{opacity: 1}
        }
            .fade-enter-active{
                animation: myfade 1s;
            }
            .fade-leave-active{
                animation: myfade 1s reverse;
            }

    实现效果一样,此时我们用的动画,当然动画还有很多效果。

    2.采用Animate.css库文件实现动画

    使用库文件时我们需要知道除了通过那么调用的另一种调用方法

    直接在class中自定义调用的样式

    css:

    @keyframes myfade{
            from{opacity: 0}
            to{opacity: 1}
        }
            .enter{
                animation: myfade 1s;
            }
            .leave{
                animation: myfade 1s reverse;
            }

    html:

    <transition name="fade"
                enter-active-class="enter"
                leave-active-class="leave"
            >
                <h3 v-if="show">Hi Boy</h3>
            </transition>

    此时的enter和leave时我们完全自定义的样式名。

    如果向调用animate.css库只需要改写html

    如下:

    <transition name="fade"
            enter-active-class="animated bounce"
            leave-active-class="animated bounce"
            >
                <h3 v-if="show">Hi Boy</h3>
            </transition>

    bounce未调用的动画名。提示前面必须加animated。

    具体想要使用什么动画请看animate.css官网

    提示:如果想要在页面初始化时播放动画需要添加appear和appear-active-class

    <transition name="fade"
            appear
            enter-active-class="animated shake"
            leave-active-class="animated bounce"
            appear-active-class="animated shake"
            >
                <h3 v-if="show">Hi Boy</h3>
            </transition>

    三、过度效果和动画效果混用

    例子如下:

    <style>
        @keyframes myfade{
            from{opacity: 0}
            to{opacity: 1}
        }
            .fade-enter,.fade-leave-to{
                opacity: 0;
            }
            .fade-enter-active,.fade-leave-active{
                transition: opacity 3s;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <transition name="fade"
                        appear
                        enter-active-class="animated shake fade-enter-active"
                        leave-active-class="animated bounce fade-leave-active"
                        appear-active-class="animated shake"
            >
                <h3 v-if="show">Hi Boy</h3>
            </transition>
            <button @click="handleClick">DoIt</button>
        </div>
    </body>

    警告:此时opacity过渡动画是3秒,animate.css动画未1秒,执行时间不统一。

    解决方法:添加type属性如

    type="transition" 以过度效果执行时间执行

    type="animation"以动画效果执行时间执行

    <transition name="fade" type="transition"
                        appear
                        enter-active-class="animated shake fade-enter-active"
                        leave-active-class="animated bounce fade-leave-active"
                        appear-active-class="animated shake"
            >

    2.自定义动画时间

    :duration="时长(毫秒)"一般定义

    :duration="{enter:1000,leave:2000}"//分别定义出场和入场时长

    <transition name="fade" :duration="10000"
                        appear
                        enter-active-class="animated shake fade-enter-active"
                        leave-active-class="animated bounce fade-leave-active"
                        appear-active-class="animated shake"
            >
                <h3 v-if="show">Hi Boy</h3>
            </transition>
  • 相关阅读:
    揭开正则表达式的神秘面纱
    海量数据库的查询优化及分页算法方案
    ASP.NET纯数字验证码
    ASP.NET四种页面导航方式之比较与选择
    C#数据结构之队列
    if exists
    使用tfs online做代码片段笔记管理
    强制删除数据库
    C# GetType()
    TreeView
  • 原文地址:https://www.cnblogs.com/tcxq/p/10334883.html
Copyright © 2011-2022 走看看