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 ...
随机推荐
- Django 11
目录 功能配置设计 跨站请求伪造CSRF 什么是CSRF 如果实现CSRF 如何避免CSRF CSRF相关的两个装饰器 auth模块 常用方法 扩展auth_user表中的字段 功能配置设计 实现类似 ...
- 常见排序汇总C&C++
常见排序主要有以下四种: 1.交换排序 2.选择排序 3.插入排序 4.归并排序 (以下代码基本都有输出每步排序结果) 一.交换排序 交换排序主要是冒泡排序和快排 1.冒泡排序 流程: (1)对数组中 ...
- visual studio code开发代码片段扩展插件
背景 visual studio code编辑器强大在于可以自己扩展插件,不仅可以去插件市场下载,也可以按照官方的API很方便的制作适合自己的插件: 自己最近在开发一个手机端网站项目,基于vant项目 ...
- Jmeter查看结果树之查看响应的13种方法[详解]
查看结果树查看响应有哪几种方法,可通过左侧面板底部的下拉框选择 1.Text 查看结果树中请求的默认格式为text,会显示请求的取样器结果.请求.响应数据3个部分内容. 取样器结果: 默认Raw视图, ...
- 实习生4面美团Java岗，已拿offer！（框架+多线程+集合+JVM）
美团技术一面 1.自我介绍 说了很多遍了,很流畅捡重点介绍完. 2.问我数据结构算法好不好 挺好的(其实心还是有点虚,不过最近刷了很多题也只能壮着胆子充胖子了) 3.找到单链表的三等分点,如果单链表是 ...
- Centos7 Openresty 开发环境
首先要安装编译环境 yum group install "Development Tools" yum install pcre-devel openssl-devel gcc c ...
- 判断机器CPU的大小端模式并将数据转换成小端形式
首先看一下概念 Little-Endian 就是低位字节排放在内存的低地址端,高位字节排放在内存的高地址端 Big-Endian 就是高位字节排放在内存的低地址端,低位字节排放在内存的高地址端. 第一 ...
- PythonI/O进阶学习笔记_8.python的可迭代对象和迭代器、迭代设计模式
content: 1.什么是迭代协议 2. 什么是迭代器(Iterator)和可迭代对象(Iterable) 3. 使用迭代器和可迭代对象 4. 创建迭代器和可迭代对象 5. 迭代器设计模式 一 ...
- linux中文件压缩介绍
原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接:https://app.yinxiang.com/shard/s17/nl/19391737/1c62bb7f-f ...
- [ASP.NET Core 3框架揭秘] 文件系统[4]：程序集内嵌文件系统
一个物理文件可以直接作为资源内嵌到编译生成的程序集中.借助于EmbeddedFileProvider,我们可以采用统一的编程方式来读取内嵌的资源文件,该类型定义在 "Microsoft.Ex ...