Vue提供我们很多js动画钩子

写在tansition标签内部

入场动画

@before-enter="" 处理函数收到一个参数（e l） el为这个元素

@enter=""处理函数收到二个参数（e l， done）done（） 为动画结束

@after-enter=""处理函数收到一个参数（e l）

出场动画

@before-leave="" 处理函数收到一个参数（e l） el为这个元素

@leave=""处理函数收到二个参数（e l， done）done（） 为动画结束

@after-leave=""处理函数收到一个参数（e l）

js常用动画库 Velocity.js 动画库

其他写法一样，只是在处理函数中用

Velocity(el, {opacity:1), {duration:1000 complete:done })

Vue中多个元素或组件的过渡

多个元素的时候过渡

可以在transition中  加mode="in-out"  意思先进后出

因为VUE有DOM复用 当标签不能显示的时候 添加key

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <style>

      .fade-enter,

      .fade-leave-to {

          opacity: 0

      }

        .fade-leave-active,

        .fade-enter-active {

            transition:opacity 2s

        }

    </style>

</head>

<body>

<section class="app">

    <transition name="fade" mode="out-in">

        <div v-if="show" key="one">Frames</div>

        <div v-else key="two">Velocity</div>

    </transition>

    <button @click="handle">Option</button>

</section>

<script>

    var vm = new Vue({

        el:".app",

        data: {

            show: true

        },

        methods: {

            handle: function () {

                this.show = !this.show

            }

        }

    })

</script>

</body>

多个组件的过渡

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <style>

      .fade-enter,

      .fade-leave-to {

          opacity: 0

      }

        .fade-leave-active,

        .fade-enter-active {

            transition:opacity 2s

        }

    </style>

</head>

<body>

<section class="app">

    <transition name="fade" mode="out-in">

        <component :is="type"></component>

    </transition>

    <button @click="handle">Option</button>

</section>

<script>

    Vue.component("child-one", {

        template:"<p>child-one</p>"

    })

    Vue.component("child-two", {

        template:"<p>child-two</p>"

    })

    var vm = new Vue({

        el:".app",

        data: {

            type: "child-one"

        },

        methods: {

            handle: function () {

                this.type = this.type === "child-one" ? "child-two" : "child-one"

            }

        }

    })

</script>

</body>

Vue中列表过渡

需要用到一个标签transition-group

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <style>

        .v-enter,

        .v-leave-to {

            opacity: 0

        }

        .v-enter-active,

        .v-enter-active {

            transition:opacity 2s

        }

    </style>

</head>

<body>

<section class="app">

    <transition-group>

    <article v-for="(item, index) of list" :key="item.id">{{item.title}}</article>

    </transition-group>

    <button @click="handle">Select</button>

</section>

<script>

    var count = 0

    var vm = new Vue({

        el: ".app",

        data: {

            list: []

        },

        methods: {

            handle: function () {

                this.list.push({

                    id: count++,

                    title:"Velocity"

                })

            }

        }

    })

</script>

Vue中Js动画 与Velocity.js 多组件多元素 列表过渡的更多相关文章

  1. vue中使用js动画与velocity.js

    一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...

  2. vue中的js动画与Velocity.js结合

    vue里面除了用css写动画,还可以用js写动画,vue的transition中,定义了几个动画钩子 第一个动画钩子:@before-enter <div id='app'> <tr ...

  3. Vue 中的动画特效

    Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  4. JQuery动画插件Velocity.js发布：更快的动画切换速度

    5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度 ...

  5. 分享JQuery动画插件Velocity.js的六种列表加载特效

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

  6. 聊聊JS动画库:Velocity.js

    前言 又到了炎热的7月,很久没有更新技术文章了,原因是上月月底实习结束,从公司离职.然后最近在弄自己的项目和考驾照,为了下次公司的应聘做准备,送别了女朋友到外地,哩哩啦啦半个月把一切事情都办妥后,还是 ...

  7. javascript动画：velocity.js学习

    第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个 ...

  8. 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置，给不同的编译条件提供配置

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  9. Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果

    你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...

随机推荐

  1. 51nod 1515：明辨是非 并查集合并

    1515 明辨是非 题目来源: 原创 基准时间限制:1 秒 空间限制:131072 KB 分值: 160 难度:6级算法题  收藏  关注 给n组操作,每组操作形式为x y p. 当p为1时,如果第x ...

  2. 027-PHP编码和解码函数base64

    <?php $data = "我爱PHP";//解码前的值 print("我爱PHP: " . base64_encode($data)); //进行解码 ...

  3. 132-PHP子类和父类同名函数的调用

    <?php class father{ //定义father类 public function cook(){ return '烹饪'; } } class son extends father ...

  4. docker 安装好后启动异常解决

    一个月前在虚拟机中根据视频教程安装了docker 启动docker后执行 systemctl status docker 出现了异常,具体如下: [root@joinApp2 ~]# systemct ...

  5. 联系我们地图坐标展示js

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6d88 ...

  6. 【剑指Offer】面试题52. 两个链表的第一个公共节点

    题目 输入两个链表,找出它们的第一个公共节点. 如下面的两个链表: 在节点 c1 开始相交. 示例 1: 输入:intersectVal = 8, listA = [4,1,8,4,5], listB ...

  7. python_生成器小结

    #__author : "ziChuan" #__data : 2019/7/19 import random # print(random.random()) # print(r ...

  8. 17 ~ express ~ 分类的显示 ，修改 和 删除

    一,前台显示 /views/admin/category.html {% extends 'layout.html' %} {% block main %} <ol class="br ...

  9. Swift—UITextField的基本用法

    https://www.jianshu.com/p/63bdeca39ddf 1.文本输入框的创建##### let textField = UITextField(frame: CGRect(x:1 ...

  10. 基于磁盘的Kafka为什么这么快

    专注于Java领域优质技术,欢迎关注 作者: Wyman 大数据手稿笔记 Kafka是大数据领域无处不在的消息中间件,目前广泛使用在企业内部的实时数据管道,并帮助企业构建自己的流计算应用程序.Kafk ...