Vue全家桶 系列文章目录
内容 | 参考链接 |
---|---|
Vue2.x - 基础 | Vue2.x - 基础 |
Vue2.x - 进阶(零) | 初始化脚手架 |
Vue2.x - 进阶(一) | refs属性、props配置项 |
Vue2.x - 进阶(二) | 混入 mixin、插件 plugins、样式 scoped |
Vue2.x - 进阶(三) | 本地存储 |
Vue2.x - 进阶(四) | 组件的自定义事件 |
Vue2.x - 进阶(五) | 全局事件总线、消息订阅与发布 |
Vue2.x - 进阶(六) | 过渡与动画 |
Vue2.x - 进阶(七) | 解决开发环境 Ajax 跨域问题 |
Vue2.x - 进阶(八) | 默认插槽、具名插槽和作用域插槽 |
Vue2.x - 周边(Vuex、Vue-router) | Vuex、Vue-router |
Vue3.0 - 新增 | Vue3.0 新增内容 |
Vue2.x 项目(附源码) | Vue + ElementUI 后台管理项目(附源码) |
Vue3.0 项目 | Vue3.0 企业级 App |
Vue 封装的过渡和动画
1. 作用
在插入、更新或移出DOM元素时,在合适的时候给元素添加样式类名。
2. 图示
3. 准备好样式
元素进入的样式
- v-enter:进入的起点
- v-enter-active:进入的过程中
- v-enter-to:进入的终点
元素离开的样式
- v-leave:离开的起点
- v-leave-active:离开的过程中
- v-leave-to:离开的终点
4. 包裹要过渡的元素
使用 transition 包裹要过渡的元素,并配置 name 属性
<transition name='hello'>
<h3 v-show='isShow'>Hello</h3>
</transition>
注意:若有多个元素需要过渡,则需要使用
<transition-group>
,且每个元素都要指定 key 值。
实例:动画效果实现动画
Vue动画效果
先在
@keyframes xxx {}
中准备好动画效果,再包裹要动画的元素。
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition appear>
<h3 v-show="isShow">Hello~</h3>
</transition>
</div>
</template>
<script>
export default {
name: "myTest",
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
h3 {
background-color: orange;
}
.v-enter-active {
animation: demo 0.5s linear;
}
.v-leave-active {
animation: demo 0.5s linear reverse;
}
@keyframes demo {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0px);
}
}
</style>
实例:过渡效果实现动画
实现相同的效果
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition-group name='hello' appear>
<h3 v-show="!isShow" key="1">Hello~</h3>
<h3 v-show="isShow" key="2">Vue~</h3>
</transition-group>
</div>
</template>
<script>
export default {
name: "myTest",
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
h3 {
background-color: orange;
}
/* 进入的起点 离开的终点*/
.hello-enter, .hello-leave-to{
transform: translateX(-100%);
}
.hello-enter-active, .hello-leave-active{
transition: 0.5s linear;
}
/* 进入的终点 离开的起点*/
.hello-enter-to, .hello-leave{
transform: translateX(0);
}
@keyframes atguigu {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0px);
}
}
</style>
实例:引入第三方库实现动画
- 第三方库 | 链接地址
- 在终端键入
$ npm install animate.css
命令- 按要求选择配置
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition-group
appear
name="animate__animated animate__bounce"
enter-active-class="animate__swing"
leave-active-class="animate__backOutUp"
>
<h3 v-show="!isShow" key="1">Hello~</h3>
<h3 v-show="isShow" key="2">Vue~</h3>
</transition-group>
</div>
</template>
<script>
import "animate.css";
export default {
name: "myTest",
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
h3 {
background-color: orange;
}
/* 进入的起点 离开的终点*/
.hello-enter,
.hello-leave-to {
transform: translateX(-100%);
}
.hello-enter-active,
.hello-leave-active {
transition: 0.5s linear;
}
/* 进入的终点 离开的起点*/
.hello-enter-to,
.hello-leave {
transform: translateX(0);
}
@keyframes atguigu {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0px);
}
}
</style>
不积跬步无以至千里 不积小流无以成江海