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. Bookshelf 2 简单DFS

    链接:https://ac.nowcoder.com/acm/contest/993/C来源:牛客网 题目描述 Farmer John recently bought another bookshel ...

  2. NO11 SSH故障排查思路和netstat命令

    本章知识相关考试:1.企业场景面试题:Linux系统如何优化?2.企业场景面试题:SSH服务连不上,如何排查?记住回答技巧: 1 ping  2 telnet 客户端ssh工具:SecureCRT,x ...

  3. python中excel表格的读写

    #!usr/bin/env python #-*- coding:utf-8 -*- import xlrd import xlwt from xlutils.copy import copy imp ...

  4. Window Server 2019 配置篇（7）- 利用脚本创建OU,组和用户

    好的,服务器到上一步为止,基本的雏形已经确立了,接下来我们要完善一些细节 打开AD-admin服务器,创建一个脚本,要求能够从csv文件中读出数据并建立OU,组和用户,以及他们的密码 这里有一个参考的 ...

  5. DStream-04 Window函数的原理和源码

    DStream 中 window 函数有两种,一种是普通 WindowedDStream,另外一种是针对 window聚合 优化的 ReducedWindowedDStream. Demo objec ...

  6. C++ Socket WSAENOBUFS WSAoverlapped

    WSARecv的时候,投递的接收缓冲区的大小设置为0. 然后手动调用非阻塞recv从缓冲区接受数据,直到WSAEWOULDBLOCK,不然会有很多的buffer被锁住,当客户端的数量达到一定数目时,就 ...

  7. ROS大型工程学习（一） 必须了解的基本文件

    一.Cmake文件 阅读工程,首先点开CMakeLists 文件,会定义一些库和可执行文件.首先看可执行文件,rosrun的就是这个节点navigator add_executable(navigat ...

  8. 《学习R》笔记：科学计算器、检查变量和工作区、向量、矩阵和数组、列表和数据框

    一.第二章 科学计算器 要检查两个数字是否一样,要使用 all.equal() ,不要使用 == ,== 符号仅用于比较两个整型数是否存在相同 . > all.equal(sqrt(2)^2,2 ...

  9. jquery实现常用UI布局

    tab html <div class="tab"> <ul class="tab-title"> <li class=" ...

  10. AS-PATH（路径属性）路由路径欺骗术

    AS-PATH(路径属性)路由路径欺骗术: ①:抓取感兴趣流量——前缀与访问 ②:创建路由地图 ③:路由地图第一法则——permit 10 ④:在第一法则中,匹配(感兴趣流量) ⑤:设置 路径欺骗术— ...