Vue同时使用transition(过渡)和animate.css(动画库)

动画库和过渡我们都简单介绍了如何单独使用!那么一起使用其实就是两者结合

<div id="app">
    <transition
            type="transition"
            appear
            enter-active-class="animated swing active"
            leave-active-class="animated bounceOutDown leave"
            appear-class="animated swing"
            :duration="{enter:3000,leave:5000}"
    >
        <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>

添加过渡样式

.v-enter,.v-leave-to{
    opacity: 0;
    color: #000;
}
.active,.leave{
    color:deepskyblue;
    transition: all 3s;
}

给定不同状态是的css,实现过渡

    解决第一次出现没有动画新增apper属性点添加apper-active-class,同时使用过渡和动画,可以在class中新增过渡的calss,v-enter-active,v-leave-active,动画时间以哪个为准可以设置tyep=animation或者transition,也可以自定义动画时长,:duration传入数字(ms)或者传入对象enter和leave分别时长,

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程坑太多

事件对象的使用、属性和方法

1273
来自专栏小李刀刀的专栏

动态实现指定图片半透明及鼠标事件

说明:在不改变HTML代码的前提下,通过CSS和JavaScript,对指定的图片实现半透明效果。并为该图片添加鼠标滑过和滑出特效。 具体实现: 1.假设我们要...

3109
来自专栏木子昭的博客

<布局>子级相对级居中对齐的几种方式

? 一. 父元素相对定位, 子元素绝对定位,然后右下偏移top: 50%; left: 50%; 再反向偏移transform: transtlate(-50...

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

从零开始学 Web 之 DOM(一)DOM的概念,对标签操作

我们把 html 文件看成一个文档,因为万物皆对象,所以这个文档也是一个对象。这个文档中所有的标签都可以看成一个对象,比如 div 标签,p 标签等。

1242
来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。

2320
来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

1. 绑简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。 jQuery简单绑定事件...

1888
来自专栏web前端-

HTML基础知识

  属性的作用就是就为元素提供更多的信息,大多数元素都可以拥有属性    属性的语法:<标签 属性1=参数1>   注意空格的使用

4643
来自专栏前端说吧

JS-DOM对象知识点汇总(慕课)

3027
来自专栏沈唁志

jQuery中的9个选择器

1512
来自专栏HTML5学堂

关于行、块元素的讲解以及HTML5元素的分类

继上周我们讲解了所有常用的CSS选择器以及CSS选择器的优先级。到目前为止,你是不是觉得静态页面布局简单了很多,而不是单单使用类名选择器(虽然很好用)来操作了。...

4797

扫码关注云+社区

领取腾讯云代金券