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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
javascript 学习笔记(onchange等)
Nov 14 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
js中new一个对象的过程
Feb 20 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 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安全配置方法
2007/06/16 PHP
php UTF8 文件的签名问题
2009/10/30 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
PHP pear安装配置教程
2016/05/14 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
ext jquery 简单比较
2010/04/07 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
python实现音乐下载器
2018/04/15 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
董事长秘书职责
2014/01/31 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
网上卖盒饭创业计划书范文
2014/02/07 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书