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. Linux基础之防火墙

    Linux基础之防火墙 Iptables   最初认识iptables还是在安卓手机上玩tiny的时候知道的,什么扫地僧.Jume等防跳脚本都基于iptables原理,一直觉得iptables的命令很 ...

  2. 学习进度05（billbill长评爬取02）

    今天下雪了,是个看<白色相簿2>的好日子. 昨天我们获取所有长评url,今天要解析这些url获取更多的信息随便,点开一个,我们需要的数据有标题,时间,内容.点赞数和评论先不弄了. 解析js ...

  3. HihoCoder第七周：完全背包问题

    1043 : 完全背包 时间限制:20000ms 单点时限:1000ms 内存限制:256MB 描述 且说之前的故事里,小Hi和小Ho费劲心思终于拿到了茫茫多的奖券!而现在,终于到了小Ho领取奖励的时 ...

  4. arduino中的serial .available()和serial.read()

    Serial.available() 的意思是:返回串口缓冲区中当前剩余的字符个数.一般用这个函数来判断串口的缓冲区有无数据,当Serial.available()>0时,说明串口接收到了数据, ...

  5. Python序列内单双引的问题——未解决

    在学习python基础的时候,遇到这样一个问题: tuple=(2,2.3,"yeah",5.6,False)list=[True,5,"smile"] 这样输 ...

  6. javascript中window.open()与window.location.href

    1.window.location是window对象的属性,而window.open是window对象的方法    window.location是你对当前浏览器窗口的URL地址对象的参考!      ...

  7. mybatis xml <if>判断字符串相等

    mybatis 映射文件中,if标签判断字符串相等,两种方式: 因为mybatis映射文件,是使用的ognl表达式,所以在判断字符串sex变量是否是字符串Y的时候, <if test=" ...

  8. css 径向渐变

    .example { width: 150px; height: 80px; background: -webkit-radial-gradient(red, green, blue); /* Saf ...

  9. CSS - 实现荧光边框

    1,index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  10. my97datepicker实现日期改变立刻触发函数

    <input type="text" class="Wdate" onclick="WdatePicker({onpicking:functio ...