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 ...
随机推荐
- SpringAOP在web应用中的使用
之前的aop是通过手动创建代理类来进行通知的,但是在日常开发中,我们并不愿意在代码中硬编码这些代理类,我们更愿意使用DI和IOC来管理aop代理类.Spring为我们提供了以下方式来使用aop框架 一 ...
- 服务网格数据平面的关键：层层剖析Envoy配置
Envoy是一种高性能C++分布式代理,专为单个服务和应用程序设计.作为Service Mesh中的重要组件,充分理解其配置就显得尤为重要.本文列出了使用Envoy而不用其他代理的原因.并给出了Env ...
- Python3之Django的Cookie与Session的使用
一.Cookie的使用 1.设置Cookie url.set_cookie("tile","zhanggen",expires=value,path='/' ) ...
- Kubernetes服务发现入门：如何高效管理服务？
愈发复杂的应用程序正在依靠微服务来保持可扩展性和提升效率.Kubernetes为微服务提供了完美的环境,并能够让其与Kubernetes的工具组件和功能兼容.当应用程序的每个部分放置在一个容器中,整个 ...
- Java 从入门到进阶之路（十五）
在之前的文章我们介绍了一下 Java 中的接口,本章我们来看一下 Java 中类的多态. 在日常生活中,很多意思并不是我们想要的意思,如下: 1.领导:“你这是什么意思?” 小明:“没什么意思,意思意 ...
- 跟着文档学习gulp1.2创建任务(task)
导出任务 任务(task)可以分为公开(public)或私有(private)类型 公开任务从gulpfile中被导出(export),可以通过gulp命令直接调用 私有任务被设计为在内部使用,通常作 ...
- CSRF与auth模块
目录 一.模拟实现中间件的编程思想 (一)impotlib模块 (二)实现功能的配置使用 二.跨站请求伪造CSRF (一)由来 (二)form表单的CSRF (三)ajax中的CSRF (1)通过da ...
- 关于maven依赖关系的问题
maven可以非常方便的管理jar包依赖问题. 这几天遇到的问题是:使用maven在idea跑flink程序提示 java.lang.ClassNotFoundExceptionjava.lang.N ...
- Java基础语法08-面向对象-枚举-包装类-接口
枚举 枚举是一种特殊的类它的对象是有限固定的几个常量对象. JDK1.5之前 构造器加private私有化 本类内部创建一组常量对象,并添加public static修饰符,对外暴露这些常量对象 JD ...
- 下载Abook 高等教育出版社网站资料
一.背景 又快到了期末复习周,这个学期学了一门操作系统,老师没有给课本习题的答案,说是配套网站上有,我看了一下,确实有,是高等教育出版社的数字课程网站Abookl http://abook.hep.c ...