一、过渡(动画)

　　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. 第二百七十七节，MySQL数据库-数据表、以及列的增删改查

    MySQL数据库-数据表.以及列的增删改查 1.创建一个表 CREATE(创建) TABLE(表) ENGINE(引擎) ENGINE=INNODB(引擎)还有很多类引擎,这里只是简单的提一下INNO ...

  2. socket udp广播和多播的简单实现

    UDP广播与多播 作者:legend QQ:1327706646 使用UDP协议进行信息的传输之前不需要建议连接.换句话说就是客户端向服务器发送信息,客户端只需要给出服务器的ip地址和端口号,然后将信 ...

  3. 采用预取（Prefetch）来加速你的网站(转)

    一.DNS预取 如果你像我一样想在网站上有一个Twitter小程序,还有网站分析,再也许一些网页字体,那么你必须要链接到一些其它域名,这意味着你将不得不引发DNS查询.我的建议通常是,不要还没有先适当 ...

  4. 实际用户ID，有效用户ID，保存的设置用户ID

    Unix中常见的几个概念,下面做一个解释. 首先需要明确一点,这几个概念都是和进程相关的. real user ID表示的是实际上进程的执行者是谁,effective user ID主要用于校验该进程 ...

  5. Mac 安装Bower

    1.安装bower,得首先安装node: 1 brew install npm  //npm是nodejs的程序包管理器,如果安装过nodejs,可忽略此步. 2.安装Git(因为需要从Git仓库获取 ...

  6. js文章收藏

    js文件被浏览器缓存的问题:http://www.cnblogs.com/wangtao_20/p/4589898.html

  7. 【BZOJ2525】[Poi2011]Dynamite 二分+树形DP

    [BZOJ2525][Poi2011]Dynamite Description Byteotian Cave的结构是一棵N个节点的树,其中某些点上面已经安置了炸.药,现在需要点燃M个点上的引线引爆所有 ...

  8. maven profile多环境动态配置文件使用

    pom.xml <profiles> <!-- =====开发环境====== --> <profile> <id>dev</id> < ...

  9. Netty处理TCP拆包、粘包

    Netty实践(二):TCP拆包.粘包问题-学海无涯 心境无限-51CTO博客 http://blog.51cto.com/zhangfengzhe/1890577 2017-01-09 21:56: ...

  10. container,algorith,iterate

    \ http://morningspace.51.net/resource/stlintro/stlintro.html 标准容器 C++标准容器分为序列容器和关联容器,对于序列容器,C++提供的基本 ...