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中什么是动画 开始先啰嗦一下,动画的解释(自我理解
随机推荐
- Python IO编程-读写文件
1.1给出规格化得地址字符串,这些字符串是经过转义的能直接在代码里使用的字符串 需要导入os模块 import os >>>os.path.join('user','bin','sp ...
- 参数化取值策略Sequential
1.Sequential+Each iteration(顺序方式+每次迭代更新取值),设置Run—Logic中action循环迭代11次,并运行以上脚本,结果如下: 2.Sequential+ ...
- 基于【SpringBoot】的微服务【Jenkins】自动化部署
最近,也是抽空整理了一些在工作中积累的经验,通过博客记录下来分享给大家,希望能对大家有所帮助: 一.关于自动化部署 关于自动化部署的优点,我就不在这里赘述了:只要想想手工打包.上传.部署.重启的种种, ...
- ie固定table单元格宽度
<table border="0" style="width:690px; table-layout:fixed;"> <tr> < ...
- wordpress迁移以及遇到的一些问题[mysql备份导入导出][固定链接404]
总的问题有两个,一是apache的配置,二是mysql的导出和导入.以及迁移后遇到的一些问题解决过程和方法. A机器为老server.B为新server,A机器使用Appserv,B使用wmap,在配 ...
- linux入门基础——linux用户基础
这篇内容是linux用户基础,相关内容见linux改动username和ubuntu改动username和主机名. 用户.组 当我们使用linux时,须要以一个用户的身份登入,一个进程也须要以一个用户 ...
- [Tailwind] Extending Tailwind with Responsive Custom Utility Classes
You are able to extend the custom css with hover, focus, group-hover, responsive variants class in t ...
- Android nomedia 避免图片等资源泄露在系统图库其中
总结 Android nomedia 避免文件泄露在系统图库和系统铃声中 在应用开发中 项目的图片总是被系统的图库收录了 避免图片被系统图库收录的发现有2个方法 第一种针对图片 将 .png为后缀的图 ...
- Android学习笔记之ProgressBar案例分析
(1) <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to ...
- http server优雅启停原理及验证
问题背景 在 http应用程序重启时,如果直接 kill -9 使程序退出,然后再启动,会存在的问题: 旧的请求未处理完,如果服务端进程直接退出,会造成客户端连接中断(收到 RST) 新请求打过来,服 ...