vue中appear的用法


Posted in Javascript onAugust 17, 2017

关于appear的用法和enter的用法相似,它只是在第一次渲染的时候才会起作用。看完整的代码:

别忘了引用vue.js

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>初始渲染的过渡</title>
 <script src="vue.js"></script>
</head>
<style>
 .custom-appear-active{
  color: #2fe26d;
  background: #b6b6b6;
  transition: all 1s ease;
 }
 .custom-appear{
  font-size: 40px;
  color: #e069e2;
  background: #7798e2;
 }
 .custom-appear-to{
  color: #e29138;
  background: #1c8942;
 }
</style>
<body>
<div id="app">
 <transition
   appear
   appear-class="custom-appear"
   appear-to-class="custom-appear-to"
   appear-active-class="custom-appear-active"
 >
  <p>appear</p>
 </transition>
</div>
<script>
 new Vue({
  el: "#app"
 })
</script>
</body>
</html>

但是这里有一些问题:关于appear-class、 appear-to-class、 appear-active-class的相同属性那个起作用的问题。

四种情况:(与他们在style中的排列顺序有关系)

1、appear-class、 appear-to-class、 appear-active-class或者 appear-to-class、appear-class、 appear-active-class的排列顺序,此时只有appear-active-class的属性起作用。

2、appear-active-class、appear-class、 appear-to-class

此时appear-active-class的不起作用,由appear-class过渡到appear-to-class属性。

3、appear-class、appear-active-class、 appear-to-class

此时appear-class属性不起作用,由appear-active-class过渡到 appear-to-class属性。

4、 appear-to-class、 appear-active-class、appear-class

此时appear-to-class不起作用,由appear-class过渡到 appear-active-class属性。

enter也有相似的问题

总结

以上所述是小编给大家介绍的vue中appear的用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
js实现网页定位导航功能
Mar 07 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
Angularjs单选框相关的示例代码
Aug 17 #Javascript
js实现简易聊天对话框
Aug 17 #Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 #Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 #Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 #Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 #Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 #Javascript
You might like
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
简单介绍Ruby中的CGI编程
2015/04/10 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
写给女朋友的道歉信
2014/01/08 职场文书
大班开学家长寄语
2014/04/04 职场文书
总经理检讨书
2014/09/15 职场文书
设备收款委托书范本
2014/10/02 职场文书
工会文体活动总结
2015/05/07 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
Nginx反向代理配置的全过程记录
2021/06/22 Servers
vue实现拖拽交换位置
2022/04/07 Vue.js