vue中appear的用法
关于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的用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- “访问限制”&“代理访问”实验
- OpenDaylight Lithium-SR2 Cluster集群搭建
- Linux | CentOS7下会玩JDK不?你确定?
- Linux | 不懂Linux的码神,不是真正的菜鸟
- 初体验Spring Boot 2支持的HikariCP连接池
- 快来了解JDK10中引入的全新JIT编译器:Graal
- 基于Ryu打造自定义控制器
- Junit 5新特性全集
- 深入了解浏览器的重绘与重排
- 自己动手写区块链(Java版)
- 自己动手写区块链-发起一笔交易(Java版)
- 详解JavaScript跨域问题
- OpenStack Magnum及Liberty新功能简介
- JDK10要来了:下一代 Java 有哪些新特性?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- TypeScript手记(一)
- Codeforces Round #665 (Div. 2)
- MONGODB 加索引 大内存 与连锁思维
- 3分钟短文|Laravel 使用like匹配字符串的用法示例
- 3分钟短文|Laravel命令行调用控制器方法,你会几个?
- 3分钟短文 | Laravel 给所有视图追加公共数据
- 为主题用pugjs编写的hexo博客添加网站运行时间
- Qt UDP广播
- Qt文件操作QFile
- 终端shell美化
- Qt CMake GUI项目生成脚本
- Hexo + Git Pages搭建个人博客(一)
- C++和Java的变量对比
- 记录一次Hexo的崩溃修复
- archlinux安装篇(三) KDE配套小工具