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. NOR Flash驱动

      驱动程序 1 ] ] );81         ;83 }84 85 86 static void __exit nor_exit(void)87 {88         iounmap(nor_ ...

  2. G - Traffic

    vin is observing the cars at a crossroads. He finds that there are n cars running in the east-west d ...

  3. created a ThreadLocal with key of type [oracle.jdbc.driver.AutoKeyInfo$1]

    环境: spring4.3, mybatis3.5.2, ojdbc8_8c(oracle 18c jdbc) 调试状态下退出时,提示: 严重 [main] org.apache.catalina.l ...

  4. Windows 下 GNS3 安装与基本使用指南

    1.GNS3简介 GNS3是一款图形化的网络虚拟软件,可以运行在多个平台(windows,linux,mac OS).我们可以通过它来学习Cisco的认证,或者是检验将要在生产环境中部署实施的相关配置 ...

  5. docker 后台运行和进入后台运行的容器

    先创建并进入一个新的被命名为newos的新容器    docker run -it --name newos docker.io/centos #创建并指定端口号映射 docker run -d -p ...

  6. 配置多个数据源datasource

    https://www.jianshu.com/p/34730e595a8c @Primary.@Qualifire.@Autowired.@Resource https://blog.csdn.ne ...

  7. 安装python包的两种方法

    1.在 anaconda 环境中安装包 selenium conda install selenium 2.python 下安装包 selenium pip install selenium 3.测试 ...

  8. golang打包

    golang打包windows很简单直接go bulid xx.go 会有一个.exe文件 直接运行这个文件就行 golang打包linux服务器 SET CGO_ENABLED=0 SET GOOS ...

  9. Python MySQL Limit

    章节 Python MySQL 入门 Python MySQL 创建数据库 Python MySQL 创建表 Python MySQL 插入表 Python MySQL Select Python M ...

  10. UVA - 820 Internet Bandwidth (因特网带宽)（最大流）

    题意:给出所有计算机之间的路径和路径容量后,求出两个给定结点之间的流通总容量.(假设路径是双向的,且两方向流动的容量相同) 分析:裸最大流.标号从1开始,初始化的时候注意. #pragma comme ...