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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
javascript得到XML某节点的子节点个数的脚本
Oct 11 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
利用JS实现数字增长
Jul 28 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
使用vue构建多页面应用的示例
Oct 22 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 Javascript
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 adodb介绍
2009/03/19 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
python中base64加密解密方法实例分析
2015/05/16 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
python的依赖管理的实现
2019/05/14 Python
python根据时间获取周数代码实例
2019/09/30 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
css3实现动画的三种方式
2020/08/24 HTML / CSS
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
广播体操比赛口号
2014/06/10 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
运动会200米广播稿
2015/08/19 职场文书