VUE：过渡&动画
VUE：过渡&动画
vue动画的理解
1）操作css的 trasition 或 animation
2）vue会给目标元素添加/移除特定的class
3）过渡的相关类名
xxx-enter-active：指定显示的transition
xxx-leave-active：指定隐藏的transition
xxx-enter/xxx-leave-to：指定隐藏时的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>10_过渡&动画</title>
<style>
/* 显示或隐藏的过滤效果 */
.xxx-enter-active,.xxx-leave-active{
transition: opacity 1s;
}
/* 隐藏时的样式 */
.xxx-enter,.xxx-leave-to{
opacity: 0;
} /* 显示的过滤效果 */
.move-enter-active{
transition: all 1s;
}
/* 隐藏的过滤效果 */
.move-leave-active{
transition: all 3s;
}
/* 隐藏时的样式 */
.move-enter,.move-leave-to{
opacity: 0;
transform: translateX(20px);
}
</style>
</head>
<body>
<!--
1.vue动画的理解
操作css的trasition或animation
vueh会给目标元素添加/移除特定的class
2.基本过渡动画的编码
1）在目标元素外包裹<transition name="xxx"></transition>
2）定义class样式
1>.指定过渡样式:transition
2>.指定隐藏时的样式:opacity/其他
3）过渡的类名
xxx-enter-active：指定显示的transition
xxx-leave-active：指定隐藏的transition
xxx-enter：指定隐藏时的样式
-->
<div id="test1">
<button @click="isShow=!isShow">toggle</button>
<transition name='xxx'>
<p v-show="isShow">hello</p>
</transition>
</div> <div id="test2">
<button @click="isShow=!isShow">toggle</button>
<transition name='move'>
<p v-show="isShow">hello</p>
</transition>
</div> <script type="text/javascript" src="../js/vue.js" ></script>
<script>
new Vue({
el:'#test1',
data(){
return {
isShow:true
}
}
}) new Vue({
el:'#test2',
data(){
return {
isShow:true
}
}
})
</script>
</body>
</html>
VUE：过渡&动画的更多相关文章
- vue过渡动画
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...
- Vue过渡动画—Vue学习笔记
要求:要通过Vue使用过渡动画我们要把需要过度的元素放在<transition name='变量名'></transition>中. 原理:通过在特定的时刻增加/移除样式实现. ...
- vue过渡动画效果
1 过渡基础 1.1 过渡的方式 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS ...
- vue过渡 & 动画---进入/离开 & 列表过渡
(1)概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animat ...
- Vue过渡动画运用transition
vue的过渡动画,主要是transition标签的使用,配合css动画实现的.官方文档css过渡 通过点击事件来切换show的值来改变显示的文本,下面的css通过进入离开时的在匀速状态下xxs(秒)下 ...
- Vue.js 第3章 axios&Vue过渡动画
promise 它将我们从回调地狱中解脱出来 创建和使用 var fs = require('fs') // 创建promise // reslove表示执行成功后调用的回调函数 // reject表 ...
- vue 过渡 & 动画
过渡 & 动画 过渡动画 用css先定义好动画效果 .a-enter-active, .a-leave-active { transition: all 1.5s; } .a-enter, . ...
- （学习心路历程）Vue过渡/动画 VS. 过渡/动画
[此篇为本人的个人见解和哔哔赖赖,如果有观点不对的地方,还请大家指出来哇!!] 最近实习在做一个项目,里面应用的动画效果还蛮复杂的,因为本身对Vue框架比较熟悉,所以最终选择了Vue框架. 自己之前从 ...
- vue过渡动画样式
在进入/离开的过渡中,会有 6 个 class 切换. v-enter:定义进入过渡的开始状态.在元素被插入之前生效,在元素被插入之后的下一帧移除. v-enter-active:定义进入过渡生效时的 ...
- [原]浅谈vue过渡动画,简单易懂
在vue中什么是动画 开始先啰嗦一下,动画的解释(自我理解
随机推荐
- OOP 面向对象 七大原则 （一）
OOP 面向对象 七大原则 (一) 大家众所周知,面向对象有三大特征继承封装多态的同时,还具有这七大原则,三大特征上一篇已经详细说明,这一篇就为大家详解一下七大原则: 单一职责原则,开闭原则,里氏 ...
- Ubuntu14.04 安装CUDA7.5 + Caffe + cuDNN
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50961542 花了一天时间,在电脑上安 ...
- struts配置问题
- zTree 无子节点 单击事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- nodejs-函数
使用表达式定义的函数要提到使用之前,要不然无法解析,自然的function xx(xx)不用,ECMAscript自动提前 with关键字 引入空间命令空间,然后可以直接使用里面的对象了 label标 ...
- ClientProtocolException
用httpclient 去訪问页面是会出现org.apache.http.client.ClientProtocolException 我这里出现的原因是在http请求时.请求头缺少user-agen ...
- iOS多线程与网络开发之解析json数据
郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. // 同步发送信息 2 NSData *data = [NSURLConnection sendSynchronousRequest:request r ...
- js 数组克隆
在JS中,对于对象类型的变量的引用是通过类似C之类的"指针"的方式来操作的,及假设多个变量引用同一个对象,则随意一个变量对对象的操作都会影响到其他的变量. 这个可能不是非常明确,以 ...
- QT5 Failed to load platform plugin "windows" 终极解决方式 命令行问题
Failed to load platform plugin "windows" 这个错误在双击exe运行时不会出现,当传递命令行參数时出问题 ,解决方法: int main(in ...
- 【opencv】opencv在vs下的配置（持续更新）
经常使用配置记录,会更新下去. 1.去掉ipch及.sdf文件 opencv在vs编译会得到很多文件.当中.dsf和ipch文件就有几十M.总是非常占空间,而这都是用来保存C++预编译的头文件和Int ...