一、过渡(动画)

　　1、 简介

　　　　Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，本质上还是使用CSS3动画：transition、animation

　　2、 基本用法

　　　　 1、使用transition组件，将要执行动画的元素包含在该组件内就可以了即 <transition> 运动的元素</transition>

　　　 　2、 过滤的CSS类名：　　

　　　　　　1、v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。　　

　　　　　　2、v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

　　　　　　3、v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除)，在 transition/animation 完成之后移除。　　　

　　　　　　4、v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

　　　　　　5、v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

　　　　　　6、v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

　　　　3、示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画</title>

    <script src="js/vue.js"></script>

    <style>

        p{

            width: 300px;

            height: 300px;

            background-color:red;

        }

        .fade-enter-active,.fade-leave-active{//表示渐入和渐出的时候要用什么样的动画效果

            transition:all 3s ease;        //所有元素  时间  快慢程度

        }

        .fade-enter-active{//渐入

            opacity:1;                    //透明度

            width:300px;

            height:300px;

        }

        .fade-leave-active{//渐出

            opacity:0;

            width:50px;

            height:50px;

        }

        /* .fade-enter需要放在.fade-enter-active的后面 */

        .fade-enter{

            opacity:0;

            width: 100px;

            height: 100px;

        }

    </style>

</head>

<body>

    <div id="itany">

        <button @click="flag=!flag">点我</button>

        <transition name="fade"

            @before-enter="beforeEnter"

            @enter="enter"

            @after-enter="afterEnter"

            @before-leave="beforeLeave"

            @leave="leave"

            @after-leave="afterLeave"

        >

            <p v-show="flag">网博</p>

        </transition>

    </div>

    <script>

        var vm=new Vue({

            el:'#itany',

            data:{

                flag:false

            },

            methods:{

                beforeEnter(el){

                    // alert('动画进入之前');

                },

                enter(){

                    // alert('动画进入');

                },

                afterEnter(el){

                    // alert('动画进入之后');

                    el.style.background='blue';

                },

                beforeLeave(){

                    // alert('动画即将之前');

                },

                leave(){

                    // alert('动画离开');

                },

                afterLeave(el){

                    // alert('动画离开之后');

                    el.style.background='red';

                }

            }

        });

    </script>

</body>

</html>

　　3、动画内的钩子函数

　　4、结合第三方动画库animate..css一起使用

　　　　<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">

　　　　　　<p v-show="flag">网博</p>

　　　　</transition>

　　　　示例：

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画</title>

    <link rel="stylesheet" href="css/animate.css">

    <script src="js/vue.js"></script>

    <style>

        p{

            width: 300px;

            height: 300px;

            background-color:red;

            margin:0 auto;

        }

    </style>

</head>

<body>

    <div id="itany">

        <button @click="flag=!flag">点我</button>

        <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">

            <p v-show="flag">网博</p>

        </transition>

    </div>

    <script>

        var vm=new Vue({

            el:'#itany',

            data:{

                flag:false

            }

        });

    </script>

</body>

</html>

　　5、多元素动画

　　　  <transition-group>

vue 动画过渡的更多相关文章

  1. vue动画&过渡整理

  2. Vue使用过渡类名实现动画和自定义前缀

    Vue使用过渡类名实现动画和自定义前缀 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> ...

  3. VUE：过渡&动画

    VUE:过渡&动画 vue动画的理解 1)操作css的 trasition 或 animation 2)vue会给目标元素添加/移除特定的class 3)过渡的相关类名 xxx-enter-a ...

  4. 黑马vue---46、vue使用过渡类名实现动画

    黑马vue---46.vue使用过渡类名实现动画 一.总结 一句话总结: vue动画的过渡类名的时间点中没有设置样式的话就是默认的样式 使用 transition 元素,把 需要被动画控制的元素,包裹 ...

  5. Vue列表过渡

    前面的话 本文将详细介绍Vue列表过渡 概述 前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组 ...

  6. Vue版本过渡变化

    到了2.0以后,有哪些变化: 在每个组件模板,不在支持片段代码 之前: <template id="aaa"> <h3>我是组件</h3>< ...

  7. vue动画

    最近想搞搞vue的过渡和动画,以为照着官网写就好了,谁知道还是出现一些状况 具体表现就是不用webpack打包时候写的过渡是正常的,而用了webpack打包就不正常了 说使用了未定义的element: ...

  8. vue动画实现方式

    vue动画实现方式 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  9. Vue动画操作

    概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...

随机推荐

  1. 第二百六十五节，xss脚本攻击介绍

    xss脚本攻击介绍 Cross-Site Scripting(XSS)是一类出现在 web 应用程序上的安全弱点,攻击者可以通过 XSS 插入一 些代码,使得访问页面的其他用户都可以看到,XSS 通常 ...

  2. Android_Zip解压缩工具

    public class ZipUtil { public ZipUtil(){ } /** * DeCompress the ZIP to the path * @param zipFileStri ...

  3. sed替换

    1. sed可以替换给定的文本中的字符串,可以利用正则表达式进行匹配$ sed 's/pattern/replace_string/' file或者$ cat file | sed 's/patter ...

  4. LandMVC HttpHandler web.config配置

    <system.webServer> <validation validateIntegratedModeConfiguration="false" /> ...

  5. 自动化测试的组成部分：SEARCH

    在考虑自动化测试用例时,不仅仅要考虑测试的执行步骤.在运行任何步骤之前,程序必须处在能够执行测试的状态.在测试执行后,至关重要的是知道测试是否通过,并且测试结果一定要被保存到某处以待检查或进一步分析. ...

  6. MySQL单列索引和组合索引的选择效率与explain分析

    一.先阐述下单列索引和组合索引的概念: 单列索引:即一个索引只包含单个列,一个表可以有多个单列索引,但这不是组合索引. 组合索引:即一个索包含多个列. 如果我们的查询where条件只有一个,我们完全可 ...

  7. 【MongoDB】嵌套数组查询方案

    From:http://stackoverflow.com/questions/12629692/querying-an-array-of-arrays-in-mongodb 数据 db.multiA ...

  8. LED音乐频谱之概述

    点击打开链接       转载请注明出处:http://blog.csdn.net/ruoyunliufeng/article/details/37929733 这个LED音乐频谱是我在学51单片机的 ...

  9. Git详解之二 Git细节拾遗

    git知识点详解 文件状态 现在我们手上已经有了一个真实项目的 Git 仓库,并从这个仓库中取出了所有文件的工作拷贝.接下来,对这些文件作些修改,在完成了一个阶段的目标之后,提交本次更新到仓库. 请记 ...

  10. style,currentStyle和getComputedStyle的区别

    样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对 ...