什么是过渡和动画
元素在显示和隐藏时, 实现过渡或者动画的效果, 常用的过滤和动画都是使用 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>
来源: http://www.bubuko.com/infodetail-3341935.html