Vue动画之使用volecity.js动画库

在vue中使用动画都要放在transition组件中,以后不再累述!我们还看上个例子!

<div id="app">
    <transition @before-enter="beforeEnter" @enter="handleEnter" @after-enter="afterEnter">
        <p v-if="show" volecity>Hello 十月梦想!</p>
    </transition>
    <button @click="toggle">切换</button>


</div>

使用velocity需要在动画元素上标注volecity属性,然后transition有几个状态,动画进入(before-enter,enter,after-enter),到达指定动画状态会自动执行!动画离开也有对应的leave-xxx等,不再累述,用法一样!

在methods中指定这几个方法!,enter是进入动画执行时候!

var app=new Vue({
    el:"#app",
    data:{
        show:true
    },
    methods:{
        toggle:function(){
            this.show=!this.show;
        },
        beforeEnter:(el)=>{
            el.style.opacity=0
            console.log('before')
        },
        handleEnter:(el,done)=>{
            Velocity(el,{opacity:1,color:'red'},{duration:5000},{complete:done()})
            // el.style.color="red";
            // done();
        },
        afterEnter:()=>{
            console.log('after')
        }


    }

})

不同状态可以传入一个el,就是所在的transition所包含的元素,在enetr可以传入el和done,只有done执行才可以执行after这个状态!

velocity语法:el,css变化,时长,等需要执行done,才能继续这个after

      Velocity(el,{opacity:1,color:'red'},{duration:5000},{complete:done()})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏vue学习

27、有赞Vant组件库的引入及轮播图片预览的实现②

这个vant组件与其它组件的引入方式不同,不需要在main.js中引入,直接在页面中引入即可:

28620
来自专栏Android Note

Android O:使用自定义字体资源

18930
来自专栏React Native开发圈

React Native图片选择裁剪组件

因为需要操作相册和相机,IOS需要增加隐私访问说明,修改info.plist文件增加以下项:

15020
来自专栏Web 开发

使用jQuery.data()查看元素上绑定的事件

最近遇到一个诡异的问题,发现我添加在一个HTMLElement片段上面的事件绑定,会在后续的流程中,无故丢失了。但是,我不知道它是什么时候丢失的。

9400
来自专栏张戈的专栏

WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

换成 Begin 主题之后,大伙都不约而同的给菜单用上了图标字体,确实给博客带来了一定的美化效果。 与之配套的是 font awesome 4 menus 这个...

46550
来自专栏黒之染开发日记

我在移动web开发中遇到的各种问题

目前(2015年8月3日15:02:24)在大部分安卓手机都发现这个问题,触发bug的条件知道了,但是原因未知。触发bug的条件是需要横向滚动的层不能位于纵向滚...

13220
来自专栏从零开始学 Web 前端

从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等

文本倾斜:<em></em> <i></i> <!-- 工作里尽量使用em,原因同strong -->

45420
来自专栏扎心了老铁

JavaScript实现模糊推荐的input框(类似搜索框)

如何用JS实现一个类似搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: ? 实现很简单,但是易用性会上升一大截,需要用到的有jquery-...

70690
来自专栏前端人人

React第三方组件1(路由管理之Router的使用④按需加载-上)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

37740
来自专栏阿炬.NET

常用插件备份

31780

扫码关注云+社区

领取腾讯云代金券