Vue学习第18天——Vue中的过度与动画效果的使用与案例
2023-09-11 14:21:26 时间
目录
一、过度与动画
1、原理
自动监测目标元素是否应用了 CSS 过渡或动画,如果是,在合适的时候给元素添加或删除 CSS 类名
2、标签
Vue 提供了 transition
标签,来处理过渡以及动画
3、使用场景
只有DOM切换显示与隐藏,可以使用vue的过渡或动画
在下列情形中,可以给元素或组件添加进入/离开过渡
条件渲染(v-if)
条件展示(v-show)
动态组件
组件的根节点
二、使用方法
1、准备样式
① 过度样式
元素进入的样式
v-enter:进入的起点
v-enter-active:进入过程中
v-enter-to:进入的终点
元素离开的样式
v-leave:离开的起点
v-leave-active:离开过程中
v-leave-to:离开的终点
② 动画样式
定义动画
@keyframes 动画名 { ... }
使用动画
v-enter-active:进入过程中的动画
v-leave-active:离开过程中的动画
2、使用<transition>
包裹要过度的元素
<transition>
要过添加过度或动画的元素</transiton>
三、过度效果案例
需求:点击按钮显示与隐藏H3元素
<template>
<div>
<button @click="changeShow">显示与隐藏</button>
<transition>
<h3 v-show="isShow">你好,小猫咪</h3>
</transition>
</div>
</template>
<script>
export default {
name:"Demo",
data(){
return {
isShow:true
}
},
methods:{
changeShow(){
this.isShow=!this.isShow
}
}
}
</script>
<style>
/* 进入的起点,结束的重点 */
.v-enter,.v-leave-to {
transform: translateX(-100px);
}
/* 进入过程中与离开过程中 */
.v-enter-active,.v-leave-active {
transition: all 0.5s linear;
}
/* 进入的终点,离开的起点 */
.v-enter-to,.v-leave {
transform: translateX(0);
}
</style>
运行结果
四、动画效果案例
需求:点击按钮显示与隐藏H3元素
<template>
<div>
<button @click="changeShow">显示与隐藏</button>
<transition>
<h3 v-show="isShow">你好,小猫咪</h3>
</transition>
</div>
</template>
<script>
export default {
name:"Animation",
data(){
return {
isShow:true
}
},
methods:{
changeShow(){
this.isShow=!this.isShow
}
}
}
</script>
<style>
/* 进入过程的动画 */
.v-enter-active {
animation: demo 0.5s linear;
}
/* 离开过程的动画 */
.v-leave-active {
animation: demo 0.5s linear reverse;
}
/* 定义动画 */
@keyframes demo {
0% {
transform: translateX(-100%);
};
100%{
transform: translateX(0);
}
}
</style>
运行结果
五、进阶知识
1、有多个元素需要过度/动画
需要使用<transition-group>
,且每个元素都要指定key值
<transition-group>
<h3 v-show="isShow" key="1">你好,小猫咪</h3>
<h3 v-show="isShow" key="2">你好,小猫咪</h3>
</transition-group>
不加key值,控制台报错,并且页面过度/动画效果不渲染
2、为过度/动画添加名称
当效果没有名称时,样式用v-
表示
使用name属性
为其添加名称,样式为名称-
<transition name='demo'></transition>
样式指令
.demo-enter-active, .demo-leave-active {
transition: all 0.5s linear;
}
3、页面初始化就有过度/动画效果
使用apper属性
实现元素一渲染到页面就有动画效果
<transition :apper:"true"></transition>
<!-- 或者 -->
<transition apper></transition>
六、第三方库
animate.css实现动画效果
animate.css详解:链接: Vue使用第三方库实现动画效果:animate.css使用方法和教程案例
相关文章
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- (尚024)Vue_案例_交互删除
- (尚022)Vue案例_初始化显示(十分详细!!!)
- vue基础篇---vue组件
- [转]vue-treeselect 爬坑之路
- springboot + vue 项目之前端开发工具(一)
- vue请求RSA加密
- VUE图片懒加载-vue lazyload插件的简单使用
- Vue中swiper手动滑动后不能自动播放的解决方法
- Vue完成TodoList案例
- 【Vue】vue基础语法——自定义指令、过滤、组件和动画(内附详细案例代码)——day04
- vue学习笔记十:Jquery VS Vue之页面动画明细对照
- vue学习笔记三:Jquery VS Vue之差异比较概览
- vue文档摘录八:指令明细
- Vue实战第1章:学习和使用vue-router
- Vue-cli 4在vue.config.js中配置别名
- Vue中watch用法详解
- Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用
- Vue2:vue-admin-template项目修改访问端口和网站名(人力资源项目)
- Vue学习第21天——插槽slot的理解及案例
- Vue开发实例(19)之用户列表分页的实现
- 【VUE】vue配置Gzip压缩
- vue 侦听器watch 之 深度监听 deep
- vue的响应式都用它来实现,js中强大的Object.defineProperty()方法
- 初识vue小案例
- vue 登录页背景-粒子特效(Vue-Particles)