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. js ajax跨域调用

    正常使用ajax调用java.com $.ajax({ type: 'get', url: 'http://www.java.com/custinfo?id=888', dataType: 'json ...

  2. Python基础笔记：list和tuple

    list 与 tuple 就类似于C语言中的数组,list 与 tuple 的区别就是list 可修改,而tuple不可修改: list用法示例: >>> s=[] >> ...

  3. IPv6-isis配置

    ①:ipv6 unicast-routing——开启IPv6路由功能 ②:router isis word——开启ISIS进程 ③:is-type——可以修改路由器ISIS等级 ④:进入接口 ⑤:启用 ...

  4. DRF项目之实现用户密码加密保存

    在DRF项目的开发中,我们通过直接使用序列化器保存的用户信息时,用户的密码是被明文保存到数据库中. 代码实现: def create(self, validated_data): '''重写creat ...

  5. Vulkan SDK 之 DrawCube

    Waiting for a Swapchain Buffer Beginning the Render Pass Bind the Pipeline Bind the Descriptor Sets ...

  6. 75.Python中ORM聚合函数详解：Sum

    Sum:某个字段的总和. 1. 求图书的销售总额,示例代码如下: from django.http import HttpResponse from django.db import connecti ...

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

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

  8. 115-PHP实例化和不实例化输出类常量

    <?php class boy{ //定义男孩类 const sex='男'; public $age=15; } echo '不实例化对象输出类常量:'.boy::sex; $boy=new ...

  9. 吴裕雄--天生自然C++语言学习笔记：C++ 运算符

    运算符是一种告诉编译器执行特定的数学或逻辑操作的符号.C++ 内置了丰富的运算符,并提供了以下类型的运算符: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 杂项运算符 算术运算符 下表显示 ...

  10. [GXYCTF2019]BabyUpload

    0x00 知识点 文件类型绕过: Content-Type: image/jpeg apache环境下上传.hatcess 首先上传一个.htaccess内容如下的文件 :SetHandler app ...