vue--过滤与动画
什么是过渡和动画
元素在显示和隐藏时，实现过渡或者动画的效果，常用的过滤和动画都是使用CSS来实现的。
- 在CSS中操作transition（过渡）或 animation（动画）达到不同效果
- 为目标元素添加一个父元素<trasition name="xxx">，让父元素通过自动应用class类名来达到效果
- 过滤与动画时，会为对应元素动态的添加相关class类名
- xxx-enter：定义显示前的效果
- xxx-enter-active：定义显示过程的效果
- xxx-enter-to：定义显示后的效果
- xxx-leave：定义隐藏前的效果
- xxx-leave-active：定义隐藏过程的效果
- xxx-leave-to：定义隐藏后的效果
过渡效果一
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
<style>
/* 显示或隐藏的过渡效果，zz就是下面定义的name值 */
/* .zz-enter-active进入中，.zz-leave-active离开中的效果 */
.zz-enter-active, .zz-leave-active{
transition: opacity 1s; /* 过渡，渐变效果持续时间为1s*/
} /* 显示前或隐藏后的效果 */
/* .zz-enter进入前，.zz-leave-to离开后 */
.zz-enter, .zz-leave-to{
opacity: 0; /* 都是隐藏效果 */
}
</style>
</head> <body>
<div id="app">
<button @click="show =!show">渐变过渡</button>
<transition name="zz"><!-- name的值自定义，后面要用 -->
<p v-show="show">过渡一</p> <!-- v-show为false就不显示 -->
</transition>
</div>
<script>
new Vue({
el: "#app",
data: {
show: true,
}
})
</script>
</body> </html>
过渡效果二
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
<style>
/* 可以针对显示和隐藏指定不同的效果 */
/* 显示过渡效果1s */
.zz-enter-active{
transition: all 1s; /* all所有属性，持续1s*/
} /* 隐藏过渡效果3s */
.zz-leave-active{
transition: all 3s; /* all所有属性，持续3s */
} /* 显示前和隐藏后的效果 */
.zz-enter, .zz-leave-to{
opacity: 0; /* 都是隐藏效果 */
transform: translateX(10px); /* 水平方向移动10px */
}
</style>
</head> <body>
<div id="app">
<button @click="show =!show">渐变平滑过渡</button>
<transition name="zz"><!-- name的值自定义，后面要用 -->
<p v-show="show">过渡二</p> <!-- v-show为false就不显示 -->
</transition>
</div>
<script>
new Vue({
el: "#app",
data: {
show: true,
}
})
</script>
</body> </html>
动画
CSS动画用法同CSS过渡，只不过采用animation为指定动画效果
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
<style>
/* 显示过程中的动画效果 */
.zz-enter-active{
animation: zz-in 1s;
} /* 隐藏过程中的动画效果 */
.zz-leave-active{
animation: zz-in 1s reverse;
} @keyframes zz-in{
0% { /*持续时长百分比，比如针对1s： 0%代表0秒，50%代表0.5*/
transform: scale(0); /*缩小为0*/
} 50% {
transform: scale(1.5); /*放大1.5倍*/
} 100% {
transform: scale(1); /*原始大小*/
}
} </style>
</head> <body>
<div id="app">
<button @click="show =!show">放大缩小动画</button>
<transition name="zz"><!-- name的值自定义，后面要用 -->
<p v-show="show">我是动画</p> <!-- v-show为false就不显示 -->
</transition>
</div>
<script>
new Vue({
el: "#app",
data: {
show: true,
}
})
</script>
</body> </html>
vue--过滤与动画的更多相关文章
- VUE：过渡&动画
VUE:过渡&动画 vue动画的理解 1)操作css的 trasition 或 animation 2)vue会给目标元素添加/移除特定的class 3)过渡的相关类名 xxx-enter-a ...
- 四、Vue过渡与动画、过渡css类名、自定义指定、过滤器
一.过渡 动画 1.1简单的过渡动画使用 parent.vue [0]定义一个待显示的数据 [1]定义一个显示隐藏flag [2]使用动画过滤标签,name用来连接style样式:v-show用来控制 ...
- Vue 中的动画特效
Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue过渡与动画
通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡 ...
- Vue学习之动画小结（六）
一.Vue中实现动画的方式:https://cn.vuejs.org/v2/guide/transitions.html Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括 ...
- Vue过渡和动画效果展示（案例、GIF动图演示、附源码）
前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...
- vue过滤动画
一.使用<transition name="fade"></transition>标签 name="fade", 是创建个fade的类名 ...
- Vue中过度动画效果应用
一.实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name=" ...
- Vue相关(过渡动画)
Vue 过渡 && 动画 一.CSS过渡 1.transition标签可以用来封装需要过渡的元素,添加entering/leaving 过渡, 条件是: (1)使用条件渲染语句 v-i ...
- vue.js之动画篇
本文引入类库的方式均采用CND的方式,可直接复制代码到编辑器中学习和测试 不使用动画切换元素 <div id="app"> <input type="b ...
随机推荐
- DRF Django REST framework 之 路由器与版本控制组件（七）
路由器 一些Web框架提供了用于自动确定应如何将应用程序的URL映射到处理传入请求的逻辑的功能. 而DRF的路由器组件也提供了一种简单,快速且一致的方式将视图逻辑映射到一组URL上. 路由器组件的使用 ...
- 记录一次VMware与xshell远程链接的总结
VMware 与xshell链接 说在前面 用了一年多的virtualbox,虚拟机环境的配置算是理清了,可最近参加红帽培训,大家用的都是VMware,想想我也试试吧,刚好再熟悉一下,于是就捣鼓了很久 ...
- round分析
Python 所谓的奇进偶弃,因为浮点数的表示在计算机中并不准确,用的时候可能要注意一下. 测试如下 print() 由运行得出结论: 当小数点左边为偶数:小数点右边X<6,舍 当小数点左边为偶 ...
- MongoDB 快速扫盲贴
长话短说 经过996的历练,开发者潜意识里总是以object的视角看待事物, 现在某些数据库也具备这样的视角. MongoDB是一个文档型(类JSON 文档)数据库,相比传统的关系型row/colum ...
- JS Math对象、日期对象、函数、定时器
Math对象 开平方:sqrt 绝对值:abs π:PI x的y次方:pow 四舍五入取整:round 向下取整:floor 向上取整:ceil 最大值:max 最小值: min 随机数:random ...
- Nginx 安装、配置及相关介绍
一.前言 Nginx是一个高性能的HTTP和反向代理服务器,由俄罗斯人开发的,第一个版本发布于2004年10月4日.是一款轻量型的Web服务器,其特点是占有内存少,并发能力强,对负载均衡等提供了非常方 ...
- 安卓AlertDialog四种对话框的最科学编写用法
首先我们上图: xml的代码如下,用于编写按钮: <?xml version="1.0" encoding="utf-8"?> <Linear ...
- 阿里云ECS部署Redis主备哨兵集群遇到的问题
一.部署 详细部署步骤:https://blog.csdn.net/lihongtai/article/details/82826809 Redis5.0版本需要注意的参数配置:https://www ...
- 网页解析库-Xpath语法
网页解析库 简介 除了正则表达式外,还有其他方便快捷的页面解析工具 如:lxml (xpath语法) bs4 pyquery等 Xpath 全称XML Path Language, 即XML路径语言, ...
- React: 研究Flux设计模式
一.简介 一般来说,State管理在React中是一种最常用的实现机制,使用这种state管理系统基本可以开发各种需求的应用程序.然而,随着应用程序规模的不断扩张,原有的这种State管理系统就会暴露 ...