动画效果
注:多个动画可使用 name 属性处理<transition name='test'>,则需使用test-enter-active替换v-enter-active
示例一:
Test.vue——主要代码文件
<template> <div> <button @click="isShow=!isShow">显示.隐藏</button> <!-- 方式一 class =come or go --> <!-- <h2 v-show="isShow" class="come">你好啊!</h2> --> <!-- 方式二 transition 可以写name 属性,如果写了则需要使用name属性替代v 例如:<transition name='test'>,则需使用test-enter-active替换v-enter-active :appear="true" 表示默认启动动画 注:<transition :appear="true"> 等价于 <transition appear> --> <!-- <transition :appear="true"> --> <transition appear> <h2 v-show="isShow">你好啊!</h2> </transition> </div> </template> <script> export default { name: 'Test', data () { return { isShow: true, } } } </script> <style scoped> h2 { background-color: bisque; } /* 方式二写法--vue写法 */ .v-enter-active { /* 匀速 */ /* animation: autoTest 1s linear; */ animation: autoTest 2s linear; } .v-leave-active { animation: autoTest 2s linear reverse; } /* 方式一写法 */ .come { /* 匀速 */ /* animation: autoTest 1s linear; */ animation: autoTest 2s; } .go { animation: autoTest 2s reverse; } @keyframes autoTest { from { /* transform: translateX(-100px); */ transform: translateX(100%); } to { transform: translateX(0100px); } } </style>
App.vue
<template> <div class="app"> <Test></Test> </div> </template> <script> // 引入组件 import Test from './components/Test.vue'; export default { name: 'App', components: { Test }, data () { return { // msg: '消息订阅与发布' } }, } </script> <style scoped> .app { background-color: rgb(178, 168, 168); padding: 15px; } </style>
main.js
// 引入Vue import Vue from 'vue' // 引入App import App from './App.vue' // 配置提示 Vue.config.productionTip = false // console.log('Vue.prototype==>', Vue.prototype) // console.log('VueComponent.prototype.__proto__==>', Vue.prototype) new Vue({ render: h => h(App), }).$mount('#app')
过度效果
/* 进入的起点 */ .hello-enter { /* transform: translateX(-100px); */ transform: translateX(-100%); } /* 进入的终点 */ .hello-enter-to { transform: translateX(0); } /* 离开的起点 */ .hello-leave { /* transform: translateX(-100px); */ transform: translateX(0); } /* 离开的终点 */ .hello-leave-to { transform: translateX(-100%); } 等价于==》 /* 进入的起点 ,离开的终点*/ .hello-enter,hello-leave-to { /* transform: translateX(-100px); */ transform: translateX(-100%); } /* 进入的终点,离开的起点 */ .hello-enter-to, hello-leave { transform: translateX(0); }
示例二:
<template> <div> <button @click="isShow=!isShow">显示.隐藏</button> <transition name="hello" appear> <h2 v-show="isShow">你好啊 Test2!</h2> </transition> </div> </template> <script> export default { name: 'Test2', data () { return { isShow: true, } } } </script> <style scoped> h2 { background-color: bisque; transition: 2s linear; } /* 方式二写法--vue写法 linear --匀速 */ /* 进入的起点 */ .hello-enter { /* transform: translateX(-100px); */ transform: translateX(-100%); } /* 进入的终点 */ .hello-enter-to { transform: translateX(0); } /* 离开的起点 */ .hello-leave { /* transform: translateX(-100px); */ transform: translateX(0); } /* 离开的终点 */ .hello-leave-to { transform: translateX(-100%); } </style>
简写方法
<template> <div> <button @click="isShow=!isShow">显示.隐藏</button> <transition name="hello" appear> <h2 v-show="isShow">你好啊 Test2!</h2> </transition> </div> </template> <script> export default { name: 'Test2', data () { return { isShow: true, } } } </script> <style scoped> h2 { background-color: bisque; /* transition: 2s linear; */ } /* h2 中 transition: 2s linear; 可使用下发代码代替 实现过度效果*/ .hello-enter-active, .hello-leave-active { transition: 2s linear; } /* 进入的起点 离开的终点*/ .hello-enter, .hello-leave-to { /* transform: translateX(-100px); */ transform: translateX(-100%); } /* 进入的终点 离开的起点*/ .hello-enter-to, .hello-leave { transform: translateX(0); } /* 离开的起点 */ /* .hello-leave { transform: translateX(0); } */ /* 离开的终点 */ /* .hello-leave-to { transform: translateX(-100%); } */ </style>
<template> <div> <button @click="isShow=!isShow">显示.隐藏</button> <transition-group name="hello" appear> <h2 v-show="isShow" key="1">key1 你好啊 Test3!</h2> <h2 v-show="isShow" key="2">key2 你好啊 Test3!</h2> </transition-group> </div> </template> <script> export default { name: 'Test3', data () { return { isShow: true, } } } </script> <style scoped> h2 { background-color: bisque; transition: 2s linear; } /* 方式二写法--vue写法 linear --匀速 */ /* 进入的起点 */ .hello-enter { /* transform: translateX(-100px); */ transform: translateX(-100%); } /* 进入的终点 */ .hello-enter-to { transform: translateX(0); } /* 离开的起点 */ .hello-leave { /* transform: translateX(-100px); */ transform: translateX(0); } /* 离开的终点 */ .hello-leave-to { transform: translateX(-100%); } </style>
注:可借助第三方封装好的插件库完成效果,如下示例
animate.css(animate.style)可实现动画效果的插件库
使用操作步骤(可查看官方文档):https://animate.style/#documentation
npm install animate.css --save
import 'animate.css';
<h1 class="animate__animated animate__bounce">An animated element</h1>
示例三:
<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"> <h2 v-show="isShow" key="1">key1 你好啊 Test4!</h2> <h2 v-show="isShow" key="2">key2 你好啊 Test4!</h2> </transition-group> </div> </template> <script> import 'animate.css'; export default { name: 'Test4', data () { return { isShow: true, } } } </script> <style scoped> h2 { background-color: bisque; } </style>
总结:Vue封装的过度于动画
- 作用:在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名。
- 图示
-
- 写法
- 准备好样式
- 元素进入的样式
- v-enter:进入的起点
- v-enter-active:进入过程中
- v-enter-to:进入的终点
- 元素离开的样式
- v-leave:离开的起点
- v-leave-active:离开过程中
- v-leave-to:离开的终点
- 元素进入的样式
- 使用<transition>包裹要过度的元素,并配置name属性。eg:
-
<transition name="hello"appear><h2 v-show="isShow">你好啊 Test2!</h2></transition>
-
- 若多个元素需要过度,则需要使用<transition-group>,且每个元素需要指定key值,如下所示:
-
<transition-group name="hello"appear><h2 v-show="isShow"key="1">key1 你好啊 Test3!</h2><h2 v-show="isShow"key="2">key2 你好啊 Test3!</h2></transition-group>
-
- 准备好样式
博客内容主要用于日常学习记录,内容比较随意,如有问题,还需谅解!!!