Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue同时使用transition(过渡)和animate.css(动画库)

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

作者头像
十月梦想
发布于 2018-10-09 07:22:56
发布于 2018-10-09 07:22:56
3.9K00
代码可运行
举报
文章被收录于专栏:十月梦想十月梦想
运行总次数:0
代码可运行

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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>

添加过渡样式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.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分别时长,

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-9-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
代金券都快领完了?你还不知道有这个活动?
DNSPod官网年中大促已经正式上线! 你还不知道网址? 还不知道有多低的折扣? 更不知道有多少大奖等你来抽? OMG! 赶紧阅读这篇指南 上活动页面冲冲冲! 限时秒杀 每日10点~12点 14点~16点、18点~20点 整点秒杀! 低至1折起! 还能设置秒杀提醒, 心仪商品不能错过! 热卖单品 域名低价欢乐购 解析套餐焕新上线 证书多年期直冲最低价 足足32款域名, 真的可以选到手软! 2.5折超低折扣, 一年解析最低90元! 买到就是赚到! 证书多年期! 支持国际型,国密
腾讯云DNSPod团队
2021/06/11
8650
安装电脑管家小团队版领取超值代金券~
听说,注册并安装腾讯电脑管家小团队版,还可领取DNSPod超值代金券哦!那么腾讯电脑管家小团队版是一款什么样的产品呐,今天我们就一起来了解一下吧~ 点击此处可领代金券 一、你知道腾讯电脑管家小团队版吗? 为了帮助企业以低成本、高效率、一站式的方式解决企业电脑安全、资产管理和网络行为管控问题,腾讯电脑管家推出了小团队版,是一个专为500人以下的小微企业提供高效管理电脑的综合运维平台。无需部署服务器,只要注册并下载客户端,即可免费对企业所用终端设备实施统一管理,一个平台集中解决IT管理痛点,管理员用了都说
腾讯云DNSPod团队
2021/07/05
1.5K0
解析服务,由你定价!
DNSPod是一家上线15年的优质DNS解析服务商,为了更好的为广大用户提供可靠放心的解析服务,我们对产品性能开展了优化升级。而关于产品的定价,我们决定遵循我们一贯的宗旨:倾听用户的声音。 因此,这一次,解析套餐的定价权,交给你们。 只需要花3分钟,点击下方图片填写问卷,DNSPod解析服务,由你定价!更有大额代金券等你领取噢! SMB 腾讯云中小企业产品中心   腾讯云中小企业产品中心(简称SMB),作为腾讯云体系中唯一专业服务于8000万中小企业的业务线,致力于为中小微企业提供全面完善贴心的数字
腾讯云DNSPod团队
2020/06/22
2.4K0
DNSPod国密SSL证书重磅上线!全线证书6000元代金券可领
众所周知,证书是一种能够在服务器和浏览器之间的信息交换过程中实现通信安全的有效工具,在企业网站、邮件和文档等安全保护中扮演着重要角色。 而一个重要数据现实是,我国99.99%网站系统都是在使用国外CA签发的RSA SSL证书。但国际形势急剧变化、贸易战不断升级,此前微软还把“贸易制裁” 列为微软全球信任根认证计划的评估条件之一,中国有可能成为继“古巴、朝鲜、叙利亚和伊朗”之后不允许全球CA签发RSA SSL证书的国家之一。 因此,我国必须建立自主可控的HTTPS加密“备胎”方案,如果RSA证书等产品对我国
腾讯云DNSPod团队
2020/08/17
3.1K0
【重要】施主,你有一个重要的待办!
D妹经常接到一些粗心大意型的用户反馈:D妹,我注册的DNSPod的手机号换了,登录密码了也不记得了,怎么办呀?” 还有一些闻者流泪型: “D妹,我的账号登陆绑定的前女友的微信,她现在跟别人跑了,我还怎么扫码登录呢?” 在这里,D妹强烈强烈强烈提醒诸位施主,一定要完成账号实名认证! 当你的账号丢失,无法通过手机/邮箱找不回来,账号实名认证就成为你能找回账号唯一的方法,也是最后的保障了。 你的手机号可能会换,邮箱可能会换,女朋友也可能会换,但是你的身份是永远丢不了的,只有完成了实名认证,才能保证任何情况下
腾讯云DNSPod团队
2020/08/17
1.1K0
说到.icu,你的第一反应是什么?
说到.icu,你的第一反应是什么? 相信大多数人马上联想到的是“重症监护室” So,你的想象力就局限于此了? 在三字符域名后缀中,.icu是最独特的其中一种。.icu相当简短、易记。icu虽是重症监护病房的英文缩写,一般用于搭建医疗领域网站较多;但icu,也有i see you的谐音,可以翻译为“你在我眼中”,十分适合用于搭建社交平台。 此外,由于.icu在多个行业、语言、地理位置都具有不同的含义,因此世界上任何人都可以注册.icu。无论您的网站属于哪一个行业,只要你能发散思维赋予icu更多的含义,就
腾讯云DNSPod团队
2020/07/10
8590
.com 19.9元,不限新老不限购?
在上个月,DNSPod悄咪咪的上线了一个活动:周四狂欢日。 活动规则表明:自2020年9月17日-2020年12月31日期间每个周四当天0:00-24:00,都会在这个页面上线域名活动。 例如前几周,引起一波热潮的.com 19.9元/首年,不限新老不限购。 看到这几个字,老客户们是不是感动到想流泪了。 另外,再次郑重提醒各位,我们的批量转入的功能已经上线, 快把你们散落在“五湖四海”的域名们转入回家吧! 不仅可以在周四蹲点领取大额度转入代金券,(代金券数量有限,每周四来拼手速!) 现在转入
腾讯云DNSPod团队
2020/10/09
1.1K0
哪里买. com最便宜?
推荐了过那么多的后缀,. com仍然是大家心头不变的白月光。 那么,到底哪里能以最低的价格拥有.com? 当D妹打开搜索引擎,输入这个问题,出来的答案可谓是眼花缭乱。 首先,不说价格,想要以拿到最低的优惠,过程可不比追求“女神”简单。有的要先关注微信公众号对暗号,才能领取到优惠券。有的要扫各种二维码。有的还玩返利,返利的钱还不好提现。甚至有的还要准备一些额外的“工具”(不展开讲了)。 看到这些形形色色的套路,D妹陷入了深深的疑惑:你们为难用户的样子,和女神为难追求者有什么区别?还不如直接告诉对方:我洗澡了
腾讯云DNSPod团队
2020/06/28
16.5K0
6.18 ,一波行业专属域名来袭!
很多用户在注册域名的时候,往往都会优先考虑.com。实际上,有很多小众的后缀,因为其本身就具有的含义,搭配不同的前缀,反而成为了一个过目不忘的独特“标识”。 这一期,我们就这些为这一波小众域名”正名“,好价又好记! .icu,在所有其他的三字符域名后缀中,.icu是最独特的其中一种。.icu相当简短、好记。而且这个域名可以代表多种不同意思;“我看见你”,“重症监护室”,对于医疗相关行业再适用不过了。戳下图直达.icu后缀活动价:首年4元起。 .love域名爱象征着浪漫、家庭、情感、热情和赞颂。.lov
腾讯云DNSPod团队
2020/06/22
8310
活动 | 腾讯云证通 给你送长鹅~
腾讯云证通 暖冬活动 一站式数字资产管理平台 双十一都买了什么? 手还在吗? 小灵通来送温(chang)暖(e)啦 (简单粗暴) 福利1:开通有礼 免费开通 参与方法:登录腾讯云证通控制台,点击【立即开通】按钮,即可领取 开通好礼: 域名新注 无门槛代金券 10元 商标新注 无门槛代金券  5元 代金券数量有限,先到先得,抢完为止~ 福利2:上传有礼 首次成功上传资产 参与方法:登录腾讯云证通控制台,在【资质证照】、【知识产权】、【数字证书】任一页面中,首次成功上传数字资产,即可领取 上
腾讯云DNSPod团队
2021/11/15
1.9K0
七夕,你的情人在哪里?
他来了她来了 在七夕情人节它来了 它带着甜蜜代金券向你走来了! 很多朋友常常和D妹抱怨,SSL证书产品种类太多,什么国际国密,什么OV EV DV,什么单域名多域名泛域名,每次打开下单页面都要反反复复犹豫很久,到最后干脆不买了! 这怎么行?!D妹绝对不会让朋友们在DNSPod出现选购难的情况。为此,D妹赶紧让研发同学加班加点给大家推出了“证书测一测”活动,大家只需要完成个位数的测试题,即可马上知道自己到底需要哪一款证书! 无论你是政府行业的朋友、金融行业的朋友、教育行业的朋友,等来自各行各业,都可以在这个
腾讯云DNSPod团队
2021/08/17
4480
用户故事:不再和你擦肩而过
今天这篇推送,是一个悲伤的故事。 在上周的公众号,我们推送了.club的活动:薅羊毛党速进 D妹又送福利了 发完推送,D妹就欢快的去迎接周末了。 今天,D妹突然收到了用户的反馈: D妹,你快看,我上周用8块钱薅了好多! 今天再注册,都要2000了欸! D妹定睛一看,这位朋友,你可太会了,其中甚至还有6688这样的精品数字! 而今天打开DNSPod,再次尝试注册四数字.club, 发现已经赫然变成了精品域名。 曾经有一个8块钱可以拥有你的机会,我没有珍惜 。 当你昂首一变变成了4位数
腾讯云DNSPod团队
2020/07/17
4190
前行路上,无忧相伴
520好礼 腾讯云服务器公众号后台回复「520」 参与领取轻量应用服务器随机金额代金券 限量520张,最高1314元 SMB 腾讯云中小企业产品中心     腾讯云中小企业产品中心(简称SMB),作为腾讯云体系中唯一专业服务于8000万中小企业的业务线,致力于为中小微企业提供全面完善贴心的数字化解决方案。产品线覆盖了企业客户从创业起步期、规范治理期、规模化增长期、战略升级期等全生命周期,针对性的解决企业的信息化、数字化、智能化的生产力升级需求。本中心还拥有两大独立腾讯子品牌:DNSPod与D
腾讯云DNSPod团队
2021/05/28
5080
D妹上新|一键修改DNS,用上了吗?
一键修改DNS,适用于什么场景: 1.如果用户刚刚将域名从其他注册商转入腾讯云,但是还没来得及用上腾讯云提供的解析服务。 2.如果用户的域名是在腾讯云注册的,但是自己曾经修改了NS记录,解析用了其他家的服务器,现在又希望修改回来。 如果你符合上述两个场景,那么D妹今天要介绍的这个小功能,一定能让你感叹,真方便! 注意:新注册的域名 DNS 服务器地址默认为免费套餐对应的 DNS 服务器地址,若您不需要升级套餐,则无需调整DNS 服务器地址。 一键修改DNS,怎么用? 1.登录腾讯云控制台。点击域名管理
腾讯云DNSPod团队
2020/07/03
1.4K0
一键HTTPS | 特邀您参与用户调研
一 键 加 密 啦 嘿,各位新老朋友们,一晃眼 腾讯云「一键HTTPS」上线两个月啦 这两个月里,我们吸引了2W+新用户 被吐槽,被质疑,也被夸赞 唯一不变的是,我们在不断追求进步 期待您真诚的建(tu)议(cao) 在了解功能更新前 给新朋友预习,给老朋友复习 ⬇⬇⬇ 神器是啥 ✔ 一键 HTTPS 是 SSL 证书结合腾讯云 Web 应用防火墙而开发的快速部署HTTPS 的产品。 ✔ 使用该功能,您无需进行繁琐的 SSL 证书部署操作,仅需配置一个CNAME 解析,即可实现从 HTTP 到 HT
腾讯云DNSPod团队
2021/09/06
4340
官宣 | 腾讯云证通 正式上线!(内含域名/商标等代金券…)
TencentCloud Digital Credential Platform TDCP 腾讯云证通 正式上线 数字资产听起来是一个新潮时髦的概念 但实际上TA在我们身边无处不在 资质证照、知识产权等都是数字资产 突击测试 您拥有多少数字资产? 这些数字资产都位于何处? 这些数字资产什么时候到期? 是否需要定期更新?到期前多久可以续存? 礼貌三连问 幸好! 我们有腾讯云证通 一站式的数字资产管理平台 帮助您管理这些分散的数字资产 避免您陷入浪费时间的陷阱 一张图带您了解腾讯云证通
腾讯云DNSPod团队
2021/09/26
2K0
恭喜你成为腾讯云锦鲤
       重磅! 9月11号,我们「DNSPod十问」栏目 将邀请到一位特殊嘉宾!  同时,为了庆祝腾讯云十周年 预祝腾讯云数字生态大会的举办 我们将在11号这一期的「十问」 公众号文章的评论区 抽取一位腾讯云超级锦鲤! (抽取方式,将在11号公布) 送出下列图中 全部!全部!全部! 奖品! 『万千宠爱,只给你一人』 腾讯云超级锦鲤,会是你吗? 另外,除了超级锦鲤, 我们还会抽出两尾小锦鲤, 同样送上多多多多多多款云产品! 话不多说,定好闹钟! 9月11日,上午9点 约定DNSPod公众
腾讯云DNSPod团队
2020/09/07
7040
为什么要做网站备案?
很多用户不理解,对于网站服务器在国内的网站来说,网站备案是工信部的要求,是必须要完成的工作,如果网站没有备案,就无法展示给用户浏览。网站备案是为了规范网络安全,维护经营者的合法权益,保护用户的合法权益。 为什么要做网站备案? 那么,网络备案有什么好处呢?我们一起来看看吧! 1、网站信任度高 用户在浏览网站的时候,会注意到网站有没有备案,如果网站没有备案,那么网站的信任度就会很低,如果网站有备案,那么网站的信任度就会很高。当用户在浏览网站的时候,发新网站没有备案,用户就会对网站产生不信任感,从而对网站失
腾讯云DNSPod团队
2020/07/03
1.9K0
是时候关注 .today和.world了!
不是我不明白,这世界变化快!老崔的歌总是那么富有前瞻性,突飞猛进的发展,让我们今天的世界发生了翻天覆地的变化。即使在域名这个垂直行业里,也早已不是.com的寡头世界了。 自新通用顶级域名开放以来,数以千计的新后缀面世,这其中Donuts域名注册局以242个域名后缀数量傲视群雄。而这其中“.today”、“.world”域名在这个复杂、多样且特殊的今天,让人们格外关注。 .today,专注为你 今天是崭新的一天,会有很多新鲜和期待。.today域名,可以用于与生活密切相关的行业。因为每一个访问.today网
腾讯云DNSPod团队
2020/07/03
9180
总包价29.9,云开发域名备案上线
好消息,好消息!云开发正式支持域名备案了! 虽然备案本身不需要收费,但在过去,备案前大多数都需要先购买一台服务器,而现在,你有了更低成本的选择:通过云开发的云托管服务,可以办理域名备案了!限时推广期间,总包价29.9元购买云托管备案资源包,即可开始备案。 此外,云开发还限时推出「备案多久送多久」福利:截止到11月30日,通过活动页成功购买云托管备案资源包,7天内系统会自动到账35元云开发代金券,可按需购买时长最少1个月的云开发资源,用于抵消备案期间云开发应用产生的资源消耗,做到备案0担忧! 通过云开发备
腾讯云DNSPod团队
2023/05/04
2.9K0
总包价29.9,云开发域名备案上线
相关推荐
代金券都快领完了?你还不知道有这个活动?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验