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 相关文章推荐
javascript入门基础之私有变量
Feb 23 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
原生js简单实现放大镜特效
May 16 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
js判断节假日实例代码
Dec 27 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 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
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
JS实现随机数生成算法示例代码
2013/08/08 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python如何制作英文字典
2019/06/25 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
文秘自荐信
2013/10/20 职场文书
药学专业大学生个人的自我评价
2013/11/04 职场文书
人力资源管理专业学生自我评价
2013/11/20 职场文书
欢迎横幅标语
2014/06/17 职场文书
公司踏青活动方案
2014/08/16 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android