vue的transition的name作用
记录一下今天在vue的transition中遇到的坑
<!DOCTYPE html>
<html>
<head>
<title>Vue中CSS动画原理</title>
<script type="text/javascript" src="../vue.min.js"></script>
<!-- 定义动画样式 -->
<style type="text/css">
.v-enter{
opacity: 0;
}
.v-enter-active{
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="root">
<!-- 动画 -->
<transition name="myfade">
<!-- name属性的值作为fade-enter fade-enter-active等开头的名字 -->
<div v-if="show">hello world</div>
</transition> <button @click="change">切换</button>
</div> <script type="text/javascript"> var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
change: function () {
this.show = !this.show
}
}
});
</script>
</body>
</html>
被告知 transition 的 name 属性是可以自己随意设置的，于是给了 myfade，结果发现没有效果。
后来研究了下发现，这个 name 的值是用来替换 v-enter 的 v
于是修改成
<style type="text/css">
.myfade-enter{
opacity: 0;
}
.myfade-enter-active{
transition: opacity 3s;
}
</style>
就OK了~
另注：transition 只有 name 这一个属性，且只有一个子元素，这个子元素需要 v-if 或 v-show 来控制是否显示。
vue的transition的name作用的更多相关文章
- vue项目的各个文件作用
vue项目的各个文件作用: build:放置的是webpack配置文件,一般不动,修改了必须重启服务器才能生效 config:放置针对开发环境和线上环境的配置文件,一般不动 修改后需重启 node_m ...
- php开发面试题---vue面试题（vue.js的好处及作用）
php开发面试题---vue面试题(vue.js的好处及作用) 一.总结 一句话总结: 双向数据绑定:在做ajax的时候,更新实在是太方便了 用数据绑定的思想,vue可以简单写单个页面,也可以写一个大 ...
- 在 vue 中用 transition 实现轮播效果
概述 今天我接到一个需求:轮播效果.本来我是打算使用 Swiper 实现的,但是想起来貌似 transition 也能实现.于是就试了下,真的可以,还挺简单的,于是就记录下来,供以后开发时参考,相信对 ...
- vueX、vue中transition的使用、axios
引入一篇好文章链接:看一遍就会的vuex文章;完!!! vue中transtion的使用:transition文章;完!!! axios的文章:axios;完!!!
- Vue中transition和animation的使用
一:二者的对比 1.动画循环就用animation.在animation中有一个animation-iteration-count属性可以定义循环次数.transition是执行一次以后就不会执行,但 ...
- vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
- Vue中使用key的作用
key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...
- vue中 key 值的作用
原文地址 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM ...
- vue的transition过渡效果
需要4个类: *-enter: 进入的开始状态, *-enter-active: 进入的结束状态, *-leave: 离开的开始状态, *-leave-active: 离开的结束状态 vue-rout ...
随机推荐
- HDU 1087 Super Jumping! Jumping! Jumping! （动态规划、最大上升子序列和）
Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 ...
- Win10 开启 热点的简单办法
- 小记---------idea新手操作
加载jar包 file---project structrue ---modules---dependencies---- 点+号 选择idea软件的位置的lib 添加自带的jar包,or ...
- Codeforces Round #589 (Div. 2) （e、f没写）
https://codeforces.com/contest/1228/problem/A A. Distinct Digits 超级简单嘻嘻,给你一个l和r然后寻找一个数,这个数要满足的条件是它的每 ...
- c++ try_throw_catch异常处理
参考https://www.cnblogs.com/xiaojianliu/articles/8900795.html 在程序设计时,针对不同的异常情况,预先设定异常信息,在程序运行时,根据异常提示信 ...
- 利用pcl数据结构，实现RegionGrowing的复现
这篇博客是pcl中区域增长的算法进行简介以实现重写,并添加了一些判断条件. 起初原因是在使用pcl封装的regionGrowing时,效果不太好. 于是想自己重新写一下,通过改变其中种子点的生成策略和 ...
- python-day12(正式学习)
目录 可变长参数 可变长形参之* 可变长实参之* 可变长形参之** 可变长实参之** 可变长参数应用 命名关键字形参 函数对象 四大功能 引用 当作参数传给一个函数 可以当作函数的返回值 可以当作容器 ...
- Python 入门之 内置模块 -- os模块
Python 入门之 内置模块 -- os模块 1.os os是和操作系统做交互,给操作发指令 os模块是与操作系统交互的一个接口,它提供的功能多与工作目录,路径,文件等相关 (1)工作路径 prin ...
- Nginx + Tomcat动静分离 （转）
什么是动静分离 为了提高网站的响应速度,减轻程序服务器(Tomcat,Jboss等)的负载,对于静态资源比如图片,js,css等文件,我们可以在反向代理服务器中进行缓存,这样浏览器在请求一个静态资源时 ...
- cs244a-Introduction to Computer Networking-Unit1
Unit 1 学习目标: how an application use the Internet The structure of the Internet:The 4 layer model The ...