Vue使用animation.css动画库

看一下上次的代码,最基础的把需要实现动画的代码块放在transition组件内

<div id="app">
    <transition
            appear
            enter-active-class="animated swing"
            leave-active-class="animated bounceOutDown"
            appear-class="animated swing"
            :duration="3000"
    >
        <p v-if="show">Hello World</p>
    </transition>
    <button @click="toggle">切换</button>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            show:true
        },
        methods:{
            toggle:function(){
                this.show=!this.show;
            }
        }

    })
</script>

由于使用第三方库,需要使用指定class,所有要之定义class值,使用enter-active-class和leave-active-class,必须包括animated和动画名称!

animate.css官网:https://daneden.github.io/animate.css/

但是发现第一次动画不能加载,我们在transition组件能使用 appear属性 指定一个appear-class为进入时候动画效果

appear-class="animated swing"

:duration指定动画时长单位毫秒

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Youngxj

hislider自适应幻灯片焦点图-emlog插件

1604
来自专栏WindCoder

Jquery控制input与selected

当以form表单提交,diabled时无法获取数值,readonly可以获取到数值。

1811
来自专栏lestat's blog

一些常用正则表达式

最近用phpspider抓取网页,除了用xpath匹配标签外,偶尔也会用到正则表达式, 这里简单记录一下常用的正则如下: $str=preg_replace("...

2824
来自专栏快乐八哥

手动实现jQuery Tools里面tab功能

平时开发中用的Javascript类库都是jQuery,用到插件或者第三方类库能从jQuery Tools里面找到,基本不用其他的。当然有时同事喜欢使用jQue...

2309
来自专栏蓝天

常用vim设置

    \ if line("'\"")>0&&line("'\"")<=line("$") |

1064
来自专栏每日一篇技术文章

weex-10-组件a的使用

a标签使用起来比较简单,先留下一个问题,如果想要跳转到html页面怎么实现?我们后面会讲到!

1202
来自专栏林德熙的博客

win10 uwp 横向 AppBarButton

一般看到的 AppBarButton 都是图片在上面,文字在下面,是否可以更改让文字在和图片相同的位置?本文告诉大家如何做出横向的 AppBarButton 把...

871
来自专栏Python小屋

Python爬虫基础:常用HTML标签和Javascript入门

大部分HTML标签是闭合的,由开始标签和结束标签构成,二者之间是要显示的内容,例如:<title>网页标题</title>。也有的HTML标签是没有结束标签的,...

1331
来自专栏前端小叙

input框取消光标颜色手机端不生效

<style> input{ color:transparent; } </style> <input value="我要隐藏光标"> //文字颜色可以...

4356
来自专栏coding

引用第三方样式库实现动画

animate.css是一个能渲染出炫酷效果的css库,只需引用该css库,在相应的元素上加上class类名,即可实现。

701

扫码关注云+社区

领取腾讯云代金券