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 ...
随机推荐
- HTML中用AJAX方式把数据存储到浏览器中并取出
把对象只有转成字符串形式才可以存入,取出则是把字符串转成对象
- Jmeter查看结果树之查看响应的13种方法[详解]
查看结果树查看响应有哪几种方法,可通过左侧面板底部的下拉框选择 1.Text 查看结果树中请求的默认格式为text,会显示请求的取样器结果.请求.响应数据3个部分内容. 取样器结果: 默认Raw视图, ...
- 双重检查锁单例模式为什么要用volatile关键字？
前言 从Java内存模型出发,结合并发编程中的原子性.可见性.有序性三个角度分析volatile所起的作用,并从汇编角度大致说了volatile的原理,说明了该关键字的应用场景:在这补充一点,分析下v ...
- Visual Studio2019及.NET CORE3.0的安装教程
看到很多开发.net core的初学者在安装的时候就陷入问题了,不知道安装那些东西,好吧,既然要分享知识那么就尽量做得精细一点吧,我决定从零开始为大家讲解.net core,同时有.net core工 ...
- OS OSTEP (Operating Systems Three Easy pieces 操作系统导论 )
读<OSTEP>的一点重点记录与感悟 (未完) Chapter-2 第二章 1. 操作系统的设计目标: 抽象.高性能.保护.不间断运行. 抽象:建立一些“抽象”,让操作系统方便和易于使用 ...
- Ubuntu 18.04 根目录只有 4G 大小
其实准确点儿的描述应该是:Ubuntu Server 18.04 ,设置 LVM,安装完成后根目录的容量为什么只有 4G?只有 Server 版有问题,Desktop 版没有问题,Ubuntu 16. ...
- Nginx入门教程-简介、安装、反向代理、负载均衡、动静分离使用实例
场景 Nginx入门简介和反向代理.负载均衡.动静分离理解 https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/102790862 Ub ...
- 内网渗透教程大纲v1.0
内网渗透 ☉MS14-068(CVE-2014-6324)域控提权利用及原理解析 ☉域控权限提升PTH攻击 未完待续...
- 在IIS中部署.net core应用
在IIS中部署 .NET Core应用 对于熟悉IIS的程序员来说,将 .NET Core Web应用部署在IIS中,无疑是方便统一管理的事情.网上给出很多如何在IIS中部署 .NET Core 应用 ...
- .NET Core和无服务器框架
无服务器框架是一个云提供商无关的工具包,旨在帮助构建,管理和部署无服务器组件的操作,以实现完整的无服务器架构或不同功能即服务(FaaS).无服务器框架的主要目标是为开发人员提供一个界面,该界面抽象出云 ...