1、vue 的动画流程分为enter，和leave分别对应以下两幅图

<!doctype html>
<html lang="en">
<head>
  　 <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>动画</title>

    <link rel="stylesheet" href="./lib/bootstrap.css">

    <style>

        .yf-enter, .yf-leave-to {

            opacity: 0;

        }

        .yf-enter-active, .yf-leave-active {

            transition: opacity 2s;

        }

    </style>

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

    <script>

        window.onload = function () {

            let VM = new Vue({

                el: '#outdiv',

                data: {

                    content: 'this is test content',

                    show: false

                },

                methods: {

                    change() {

                        this.show = !this.show;

                    }

                }

            })

        }

    </script>

</head>

<body>

<div class="container" id="outdiv">

    <!--如果没有指定name那么默认为v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active-->

    <!--如果定义了name那么默认为name-enter,name-enter-to,name-enter-active,name-leave,name-leave-to,name-leave-active-->

    <!--当show为true的时候，即enter时opacity被赋值为0，随着动画的进行，yf-enter被删除掉那么opacity为1，同时定义的transition便起作用了-->

    <!--当show为false的时候，即leave时yf-leave的opacity为1，当动画进行时yf-leave-to的opacity为0，同时定义的transition便起作用了-->
　　 <!--如果要定义顺序，那么可以添加mode='in-out'或者mode='out-in'这个通常在多个组件之间切换时运用-->
    <transition name="yf">

        <div class="jumbotron" v-if="show">{{content}}</div>

    </transition>

    <input type="button" value="切换" class="btn btn-primary" @click="change">

</div>

</body>

</html>

2、如果添加自定义动画，如引入animate.css动画

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>test</title>

    <link rel="stylesheet" href="./lib/bootstrap.css">

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

    <style>

        v-enter, v-leave-to {

            opacity: 0;

        }

        v-enter-active, v-leave-active {

            transition: opacity 3s;

        }

    </style>

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

    <script>

        window.onload = function () {

            let VM = new Vue({

                el: '#outdiv',

                data: {

                    content: 'this is a text',

                    show: true

                },

                methods: {

                    change() {

                        this.show = !this.show;

                    }

                }

            })

        }

    </script>

</head>

<body>

<div class="container" id="outdiv">

    <!--添加自定义的类，那么enter-active-class与leave-active-class可以赋值自定义的类名-->

    <!--如果需要指定刷新页面时的动画，那么需要指定两个类，appear与appear-active-class,用法同enter-active-class一样-->

    <!--因为animate.css是keyframe动画，那么需要添加过渡动画，那么就需要添加默认的(name|v)-active-class这个类--->

    <!--指定动画时长，如果以transition的动画时长为主，那么可以指定一个type值为transition毕竟animate.css的动画时长只有1s-->

    <!--如果需要定义一个明确的动画时长，可以添加属性:duration="{enter:5000,leave:3000}"注意以毫秒为单位，更简单的写法就指定一个值表示进入和离开的时间:duration="3000"-->

    <transition

            type="transition"

            appear

            appear-active-class="animated zoomInDown v-enter-active"

            enter-active-class="animated zoomInDown v-enter-active"

            leave-active-class="animated zoomOutUp v-leave-active">

        <div class="jumbotron" v-if="show">{{content}}</div>

    </transition>

    <input type="button" value="点击" class="btn btn-primary" @click="change">

</div>

</body>

</html>

3、指定js的动画

通过transition这个标签的6个钩子函数执行动画before-enter,enter,after-enter,before-leave,leave,after-leave注意在每个enter或者leave的时候,会传入两个参数一个是执行动画的本体一个是函数,执行完动画后执行这个函数表示动画已经执行完毕,其余的只有一个函数表示动画执行的本体.

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>test</title>

    <link rel="stylesheet" href="./lib/bootstrap.css">

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

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

    <script src="./lib/jquery.js"></script>

    <script>

        window.onload = function () {

            let VM = new Vue({

                el: '#outdiv',

                data: {

                    show: true,

                    content: 'this is test content'

                },

                methods: {

                    change() {

                        this.show = !this.show;

                    },

                    beforeEnter(elem) {

                        $(elem).css('display', 'none');

                    },

                    handleEnter(elem, done) {

                        $(elem).fadeIn(400, () => {

                            done();

                        });

                    },

                    afterLeave(elem) {

                        console.log('this is leave');

                        console.log(arguments);

                    }

                }

            })

        }

    </script>

</head>

<body>

<div class="container" id="outdiv">

    <transition

            @before-enter="beforeEnter"

            @enter="handleEnter"

            @after-leave="afterLeave"

    >

        <div class="jumbotron" v-if="show">{{content}}</div>

    </transition>

    <div class="form-group">

        <div><input type="button" value="切换" class="btn btn-primary" @click="change"></div>

    </div>

</div>

</body>

</html>

4、如果是多个组件，那么可以使用transition-group这个标签来处理

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>test</title>

    <link rel="stylesheet" href="./lib/bootstrap.css">

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

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

    <script>

        window.onload = function () {

            Vue.component('yf-test', {

                props: {

                    list: {

                        type: Array,

                        required: false,

                        default() {

                            return []

                        }

                    }

                },

                template: '<ul class="list-group"><transition-group enter-active-class="animated zoomInUp"><li class="list-group-item" v-for="(value,index) of list" :key="index"><slot :data="value"></slot></li></transition-group></ul>'

            });

            let VM = new Vue({

                el: '#outdiv',

                data: {

                    count: 1,

                    list: []

                },

                methods: {

                    add() {

                        this.list.push(this.count++);

                    }

                }

            })

        }

    </script>

</head>

<body>

<div class="container" id="outdiv">

    <div class="jumbotron">

        <div class="row">

            <div class="col-md-6">

                <yf-test :list="list">

                    <template slot-scope="props">

                        <div>{{props.data}}</div>

                    </template>

                </yf-test>

            </div>

            <div class="col-md-6">

                <yf-test :list="list">

                    <template slot-scope="props">

                        <b>{{props.data}}</b>

                    </template>

                </yf-test>

            </div>

        </div>

    </div>

    <input type="button" value="增加" class="btn btn-primary" @click="add">

</div>

</body>

</html>

 5、如果需要在vue项目是使用

import animated from 'animate.css' // npm install animate.css --save安装，在引入

Vue.use(animated)

vue 的动画的更多相关文章

  1. 从零开始学 Web 之 Vue.js（五）Vue的动画

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. 049——VUE中使用animation与transform实现vue的动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue的动画组件（transition）

    当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名. v-enter: 定 ...

  4. vue学习指南：第十篇(详细) - Vue的 动画

    Vue 提供了一些不同的过度效果,主要根 v-if v-show 动态组件 1. Vue给动画分了6个过程,在css中,扮演6个类, 1.  .v-enter定义动画的开始状态 2.  .v-ente ...

  5. Vue.js动画在项目使用的两个示例

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js.vue.js等技术,热爱新技术,热 ...

  6. [原]浅谈vue过渡动画,简单易懂

    在vue中什么是动画 开始先啰嗦一下,动画的解释(自我理解

  7. Vue.js 动画

    transition 动画: 当插入或删除包含在 transition 组件中的元素时,Vue将会做以下处理:     1.自动嗅探目标元素是否应用了css过滤或动画,如果是,在恰当的时机添加/删除c ...

  8. vue过渡动画

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

  9. router使用以及vue的动画效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. Python 爬虫一 简介

    什么是爬虫? 爬虫可以做什么? 爬虫的本质 爬虫的基本流程 什么是request&response 爬取到数据该怎么办 什么是爬虫? 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间 ...

  2. 实现Comet(服务器推送)的两种方式：长轮询和http流

    Comet 是一种高级的Ajax技术,实现了服务器向页面实时推送数据的技术,应用场景有体育比赛比分和股票报价等. 实现Comet有两种方式:长轮询与http流 长轮询是短轮询的翻版,短轮询的方式是:页 ...

  3. python的扩展包requests的高级用法

    Python 标准库中的 urllib2 模块提供了你所需要的大多数 HTTP 功能,但是它的 API 太渣了.它是为另一个时代.另一个互联网所创建的.它需要巨量的工作,甚至包括各种方法覆盖,来完成最 ...

  4. [转] 隐马尔可夫(HMM)、前/后向算法、Viterbi算法 再次总结

    最近工作需要优化LSTM-CRF经典模型中的维特比解码部分,发现对维特比一直是个模糊概念,没有get到本质,搜了一圈,发现一篇好文,mark 博主不让转载,mark个地址吧: https://blog ...

  5. Python笔记 【无序】 【四】

    魔法方法1.__xx__  总是被双下划线包围2.面向对象python的一切 3.能够在适当的时候自动被调用     构造和析构 __init__(self,……) -----相当于构造方法,类在实例 ...

  6. office 产品密钥

    刚买的小新,配置下office,作为技术人员,喜欢Share以下 office 产品密钥,任你选一组 一.序列号激活法(密钥激活法)这种是最为安全而且最为正规的方法,通过取得合法的序列号(密钥)进行激 ...

  7. （转载）深度剖析 | 可微分学习的自适配归一化 (Switchable Normalization)

    深度剖析 | 可微分学习的自适配归一化 (Switchable Normalization) 作者:罗平.任家敏.彭章琳 编写:吴凌云.张瑞茂.邵文琪.王新江 转自:知乎.原论文参考arXiv:180 ...

  8. SPI总线协议及SPI时序图详解【转】

    转自:https://www.cnblogs.com/adylee/p/5399742.html SPI,是英语Serial Peripheral Interface的缩写,顾名思义就是串行外围设备接 ...

  9. nginx反向代理转发后页面上的js css文件无法加载【原创】

    故障现象:nginx做代理转发后,发现页面上的js css文件无法加载,页面样式乱了. 原因:没有配置静态资源 解决js css文件无法加载无法访问的问题 解决办法: 修改配置文件nginx.conf ...

  10. 从url(地址栏)获取参数：Jquery中getUrlParam()方法的使用

    我想要获取如下id 如下代码(传参要加问好!!) function getUrlParam(id) { var regExp = new RegExp('([?]|&)' + id+ '=([ ...