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 ...
随机推荐
- MySQL之视图学习
MYSQL---视图 1.概述: 视图是从一个或者多个表中导出的,视图的行为与表非常类似,但视图是一个虚拟表.在视图中用户可以使用SELECT语句查询数据,以及使用INSERT.UPDATE和DE ...
- 【LeetCode】188、买卖股票的最佳时机 IV
Best Time to Buy and Sell Stock IV 题目等级:Hard 题目描述: Say you have an array for which the ith element i ...
- 【图像处理】【计算机视觉】findContours的使用
原文地址:findContours函数参数说明及相关函数作者:鸳都学童 findContours函数,这个函数的原型为: void findContours(InputOutputArray imag ...
- Java第六周实验+总结
一.实验目的 (1)掌握类的继承 1.子类继承父类中非private的成员变量和成员方法,同时,注意构造方法不能被子类继承. 2.定义类时若缺省extends关键字,则所定义的类为java.lang. ...
- spring boot-16.使用redis做缓存
spring boot 自动配置了多种 缓存管理器,按照下面的顺序查找,如果容器中有相应的组件,则使用相应的缓存管理器. Generic JCache (JSR-107) EhCache 2.x Ha ...
- Linux上面执行 Windows 命令(比如 重启服务)的简单方法
1. 首先 基础是:openssh 还有 expect的包 2. 方法 安装openssh 转帖来自: https://www.jianshu.com/p/6e5bc39d386e 最近项目在搞Jen ...
- locust 的几种写法及部分内容说明
第一种 ********************************** from locust import HttpLocust, TaskSet, task import json ...
- 05、解剖CEL文件各版本格式和读取方法（非R语言）
相比DAT文件,网络上更支持CEL级别的文件.CEL已经把DAT图像转换成数据了,而且CEL比DAT所占空间小得多.介绍一下CEL文件的格式,CEL文件有文本文件(TextCelFile,版本3).B ...
- luogu P1852 [国家集训队]跳跳棋
luogu 直接操作是不可能的,考虑发现一些性质.可以发现如果每次跳的棋子都是两边的,那么最多只有一种方案,那么就把这样操作得到的状态记为当前状态的父亲,从一个状态这样做一定会结束.那么如果两个状态只 ...
- JS 的 Element元素对象
在 HTML DOM 中, 元素对象代表着一个 HTML 元素. 元素对象 的 子节点可以是, 可以是元素节点,文本节点,注释节点. NodeList 对象 代表了节点列表,类似于 HTML元素的子节 ...