Vue--過渡動畫實現的三種方式
一.使用vue的transition標籤結合css樣式完成動畫
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 /* .v-enter-active,.v-leave-active{
10 transition:all 2s;
11 }
12 .v-enter,.v-leave-to{
13 margin-left: 100px;
14 }
15 .v-enter-to,.v-leave{
16 margin-left:0px;
17 } */
18 .show-enter-active,.show-leave-active{
19 transition:all 2s;
20 }
21 .show-enter,.show-leave-to{
22 margin-left: 100px;
23 }
24 .show-enter-to,.show-leave{
25 margin-left:0px;
26 }
27 </style>
28 <script src="../vue2.4.4.js"></script>
29 </head>
30
31 <body>
32 <!-- 定義一個vue的管理區塊，（MVVM中的View） --> 33 <!-- 34 若是要使用動畫效果: 35 第一種方式是使用transition標籤加css樣式結合完成： 36 1.給須要運動的元素加入transition標籤 37 2.默認狀況下若是控制了transition標籤元素的顯示和隱藏它會默認 38 給這個元素加入一些class 39 隱藏: 加入類名: 40 v-leave 41 v-leave-active 42 v-leave-to 43 44 顯示: 加入類名: 45 v-enter 準備進行運動的狀態(起始狀態) 46 v-enter-active 整個運動狀態 47 v-enter-to 整個運動狀態(強調運動的結果，結束狀態) 48 3.未來若是給transition設置一個name爲「show」之後,未來全部的類的名稱都須要改變，默認前綴爲v- 49 若是加入了name屬性，須要將v- 改成show- 50 -->
51 <div id="app">
52 <button @click="toggle">顯示/隱藏</button><br>
53 <!-- <transition > -->
54 <transition name="show" >
55 <span class="show" v-show="isshow">it 傳說</span>
56 </transition>
57 </div>
58
59 </body>
60
61 <script>
62
63 // 實例化vue對象（MVVM中的View Model）
64 new Vue({
65 // vm控制的區塊爲id爲app的div，此div中的全部vue指令都可以被vm解析
66 el:'#app',
67 data:{
68 // 數據 （MVVM中的Model）
69 isshow:false
70 },
71 methods:{
72 toggle:function(){
73 this.isshow = !this.isshow;
74 }
75 }
76 })
77 </script>
78 </html>
二.利用animate.css結合transition實現動畫
animate.css 演示地址 : https://daneden.github.io/animate.css/javascript
@charset "UTF-8"; /*! * animate.css -http://daneden.me/animate * Version - 3.5.2 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2017 Daniel Eden */ .animated { animation-duration: 1s; animation-fill-mode: both; } .animated.infinite { animation-iteration-count: infinite; } .animated.hinge { animation-duration: 2s; } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { animation-duration: .75s; } @keyframes bounce { from, 20%, 53%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform: translate3d(0,0,0); } 40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transform: translate3d(0, -30px, 0); } 70% { animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transform: translate3d(0, -15px, 0); } 90% { transform: translate3d(0,-4px,0); } } .bounce { animation-name: bounce; transform-origin: center bottom; } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } to { transform: scale3d(1, 1, 1); } } .pulse { animation-name: pulse; } @keyframes rubberBand { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(.95, 1.05, 1); } 75% { transform: scale3d(1.05, .95, 1); } to { transform: scale3d(1, 1, 1); } } .rubberBand { animation-name: rubberBand; } @keyframes shake { from, to { transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); } } .shake { animation-name: shake; } @keyframes headShake { 0% { transform: translateX(0); } 6.5% { transform: translateX(-6px) rotateY(-9deg); } 18.5% { transform: translateX(5px) rotateY(7deg); } 31.5% { transform: translateX(-3px) rotateY(-5deg); } 43.5% { transform: translateX(2px) rotateY(3deg); } 50% { transform: translateX(0); } } .headShake { animation-timing-function: ease-in-out; animation-name: headShake; } @keyframes swing { 20% { transform: rotate3d(0, 0, 1, 15deg); } 40% { transform: rotate3d(0, 0, 1, -10deg); } 60% { transform: rotate3d(0, 0, 1, 5deg); } 80% { transform: rotate3d(0, 0, 1, -5deg); } to { transform: rotate3d(0, 0, 1, 0deg); } } .swing { transform-origin: top center; animation-name: swing; } @keyframes tada { from { transform: scale3d(1, 1, 1); } 10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { transform: scale3d(1, 1, 1); } } .tada { animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes wobble { from { transform: none; } 15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { transform: none; } } .wobble { animation-name: wobble; } @keyframes jello { from, 11.1%, to { transform: none; } 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { animation-name: jello; transform-origin: center; } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: scale3d(.3, .3, .3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(.9, .9, .9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(.97, .97, .97); } to { opacity: 1; transform: scale3d(1, 1, 1); } } .bounceIn { animation-name: bounceIn; } @keyframes bounceInDown { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } to { transform: none; } } .bounceInDown { animation-name: bounceInDown; } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } to { transform: none; } } .bounceInLeft { animation-name: bounceInLeft; } @keyframes bounceInRight { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } to { transform: none; } } .bounceInRight { animation-name: bounceInRight; } @keyframes bounceInUp { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } to { transform: translate3d(0, 0, 0); } } .bounceInUp { animation-name: bounceInUp; } @keyframes bounceOut { 20% { transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; transform: scale3d(.3, .3, .3); } } .bounceOut { animation-name: bounceOut; } @keyframes bounceOutDown { 20% { transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); } to { opacity: 0; transform: translate3d(0, 2000px, 0); } } .bounceOutDown { animation-name: bounceOutDown; } @keyframes bounceOutLeft { 20% { opacity: 1; transform: translate3d(20px, 0, 0); } to { opacity: 0; transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { animation-name: bounceOutLeft; } @keyframes bounceOutRight { 20% { opacity: 1; transform: translate3d(-20px, 0, 0); } to { opacity: 0; transform: translate3d(2000px, 0, 0); } } .bounceOutRight { animation-name: bounceOutRight; } @keyframes bounceOutUp { 20% { transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0); } to { opacity: 0; transform: translate3d(0, -2000px, 0); } } .bounceOutUp { animation-name: bounceOutUp; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation-name: fadeIn; } @keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } } .fadeInDown { animation-name: fadeInDown; } @keyframes fadeInDownBig { from { opacity: 0; transform: translate3d(0, -2000px, 0); } to { opacity: 1; transform: none; } } .fadeInDownBig { animation-name: fadeInDownBig; } @keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } } .fadeInLeft { animation-name: fadeInLeft; } @keyframes fadeInLeftBig { from { opacity: 0; transform: translate3d(-2000px, 0, 0); } to { opacity: 1; transform: none; } } .fadeInLeftBig { animation-name: fadeInLeftBig; } @keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } } .fadeInRight { animation-name: fadeInRight; } @keyframes fadeInRightBig { from { opacity: 0; transform: translate3d(2000px, 0, 0); } to { opacity: 1; transform: none; } } .fadeInRightBig { animation-name: fadeInRightBig; } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } } .fadeInUp { animation-name: fadeInUp; } @keyframes fadeInUpBig { from { opacity: 0; transform: translate3d(0, 2000px, 0); } to { opacity: 1; transform: none; } } .fadeInUpBig { animation-name: fadeInUpBig; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { animation-name: fadeOut; } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, 100%, 0); } } .fadeOutDown { animation-name: fadeOutDown; } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { animation-name: fadeOutDownBig; } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { animation-name: fadeOutLeft; } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { animation-name: fadeOutLeftBig; } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; transform: translate3d(100%, 0, 0); } } .fadeOutRight { animation-name: fadeOutRight; } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { animation-name: fadeOutRightBig; } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, -100%, 0); } } .fadeOutUp { animation-name: fadeOutUp; } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { animation-name: fadeOutUpBig; } @keyframes flip { from { transform: perspective(400px) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in; } 80% { transform: perspective(400px) scale3d(.95, .95, .95); animation-timing-function: ease-in; } to { transform: perspective(400px); animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; animation-name: flip; } @keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipInX; } @keyframes flipInY { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipInY; } @keyframes flipOutX { from { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @keyframes flipOutY { from { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipOutY; } @keyframes lightSpeedIn { from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { transform: skewX(20deg); opacity: 1; } 80% { transform: skewX(-5deg); opacity: 1; } to { transform: none; opacity: 1; } } .lightSpeedIn { animation-name: lightSpeedIn; animation-timing-function: ease-out; } @keyframes lightSpeedOut { from { opacity: 1; } to { transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { animation-name: lightSpeedOut; animation-timing-function: ease-in; } @keyframes rotateIn { from { transform-origin: center; transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { transform-origin: center; transform: none; opacity: 1; } } .rotateIn { animation-name: rotateIn; } @keyframes rotateInDownLeft { from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { transform-origin: left bottom; transform: none; opacity: 1; } } .rotateInDownLeft { animation-name: rotateInDownLeft; } @keyframes rotateInDownRight { from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { transform-origin: right bottom; transform: none; opacity: 1; } } .rotateInDownRight { animation-name: rotateInDownRight; } @keyframes rotateInUpLeft { from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { transform-origin: left bottom; transform: none; opacity: 1; } } .rotateInUpLeft { animation-name: rotateInUpLeft; } @keyframes rotateInUpRight { from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { transform-origin: right bottom; transform: none; opacity: 1; } } .rotateInUpRight { animation-name: rotateInUpRight; } @keyframes rotateOut { from { transform-origin: center; opacity: 1; } to { transform-origin: center; transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { animation-name: rotateOut; } @keyframes rotateOutDownLeft { from { transform-origin: left bottom; opacity: 1; } to { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { animation-name: rotateOutDownLeft; } @keyframes rotateOutDownRight { from { transform-origin: right bottom; opacity: 1; } to { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { animation-name: rotateOutDownRight; } @keyframes rotateOutUpLeft { from { transform-origin: left bottom; opacity: 1; } to { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { animation-name: rotateOutUpLeft; } @keyframes rotateOutUpRight { from { transform-origin: right bottom; opacity: 1; } to { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { animation-name: rotateOutUpRight; } @keyframes hinge { 0% { transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate3d(0, 0, 1, 80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40%, 80% { transform: rotate3d(0, 0, 1, 60deg); transform-origin: top left; animation-timing-function: ease-in-out; opacity: 1; } to { transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { animation-name: hinge; } @keyframes jackInTheBox { from { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; } 50% { transform: rotate(-10deg); } 70% { transform: rotate(3deg); } to { opacity: 1; transform: scale(1); } } .jackInTheBox { animation-name: jackInTheBox; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes rollIn { from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; transform: none; } } .rollIn { animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes rollOut { from { opacity: 1; } to { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { animation-name: rollOut; } @keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { animation-name: zoomIn; } @keyframes zoomInDown { from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInDown { animation-name: zoomInDown; } @keyframes zoomInLeft { from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { animation-name: zoomInLeft; } @keyframes zoomInRight { from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { animation-name: zoomInRight; } @keyframes zoomInUp { from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { animation-name: zoomInUp; } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; transform: scale3d(.3, .3, .3); } to { opacity: 0; } } .zoomOut { animation-name: zoomOut; } @keyframes zoomOutDown { 40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { animation-name: zoomOutDown; } @keyframes zoomOutLeft { 40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; transform: scale(.1) translate3d(-2000px, 0, 0); transform-origin: left center; } } .zoomOutLeft { animation-name: zoomOutLeft; } @keyframes zoomOutRight { 40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; transform: scale(.1) translate3d(2000px, 0, 0); transform-origin: right center; } } .zoomOutRight { animation-name: zoomOutRight; } @keyframes zoomOutUp { 40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutUp { animation-name: zoomOutUp; } @keyframes slideInDown { from { transform: translate3d(0, -100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } .slideInDown { animation-name: slideInDown; } @keyframes slideInLeft { from { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } .slideInLeft { animation-name: slideInLeft; } @keyframes slideInRight { from { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } .slideInRight { animation-name: slideInRight; } @keyframes slideInUp { from { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } .slideInUp { animation-name: slideInUp; } @keyframes slideOutDown { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, 100%, 0); } } .slideOutDown { animation-name: slideOutDown; } @keyframes slideOutLeft { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(-100%, 0, 0); } } .slideOutLeft { animation-name: slideOutLeft; } @keyframes slideOutRight { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(100%, 0, 0); } } .slideOutRight { animation-name: slideOutRight; } @keyframes slideOutUp { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, -100%, 0); } } .slideOutUp { animation-name: slideOutUp; }
實例代碼:css
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <link rel="stylesheet" href="../animate.css">
9 <script src="../vue2.4.4.js"></script>
10 </head>
11
12 <body>
13 <!-- 定義一個vue的管理區塊，（MVVM中的View） -->
14 <div id="app">
15 <button @click="toggle">顯示/隱藏</button><br>
16 <transition 17 enter-active-class="animated fadeInRight" 18 leave-active-class="animated fadeOutRight" 19 > 20 <!-- 坑：span行內元素（行內元素沒有寬） 21 應該改成塊級元素 22 --> 23 <!-- <span class="show" v-show="isshow">it創業</span> --> 24 <div style="width:200px" class="show" v-show="isshow">it創業</div> 25 </transition>
26 </div>
27 </body>
28
29 <script>
30
31 // 實例化vue對象（MVVM中的View Model）
32 new Vue({
33 // vm控制的區塊爲id爲app的div，此div中的全部vue指令都可以被vm解析
34 el:'#app',
35 data:{
36 // 數據 （MVVM中的Model）
37 isshow:false
38 },
39 methods:{
40 toggle:function() { 41 this.isshow = !this.isshow; 42 } 43 }
44 })
45 </script>
46 </html>
三.利用 vue中的鉤子函數實現動畫
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 .show {
11 transition: all 0.5s;
12 }
13 </style>
14 <script src="../vue2.4.4.js"></script>
15 </head>
16
17 <body>
18 <!-- 定義一個vue的管理區塊，（MVVM中的View） -->
19 <div id="app">
20 <button @click="toggle">顯示/隱藏</button><br>
21 <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
22 <div class="show" v-show="isshow">itcast 傳智</div>
23 </transition>
24 </div>
25
26 </body>
27
28 <script>
29 // 實例化vue對象（MVVM中的View Model）
30 new Vue({
31 // vm控制的區塊爲id爲app的div，此div中的全部vue指令都可以被vm解析
32 el: '#app',
33 data: {
34 // 數據 （MVVM中的Model）
35 isshow: false
36 },
37 methods: {
38 toggle: function () {
39 this.isshow = !this.isshow;
40 },
41 // 如下三個與enter相關的方法只會在元素由隱藏變爲顯示的時候纔會執行
42 // el:指的是當前調用這個方法的元素對象
43 // done:用來決定是否要執行後續的代碼若是不執行這個方法，那麼未來執行完before執行完enter之後動畫就會中止
44 beforeEnter: function (el) {
45 console.log("beforeEnter");
46 // 當入場以前會執行 v-enter
47 el.style = "padding-left:100px";
48 },
49 enter: function (el, done) {
50 // 當進行的過程當中每執行 v-enter-active
51 console.log("enter");
52 // 爲了能讓代碼正常進行，在設置告終束狀態後必須調用一下這個元素的
53 // offsetHeight / offsetWeight 只是爲了讓動畫執行
54 el.offsetHeight;
55
56 // 結束的狀態最後啊寫在enter中
57 el.style = "padding-left:0px";
58
59
60 // 執行done繼續向下執行
61 done();
62 },
63 afterEnter: function (el) {
64 // 當執行完畢之後會執行
65 console.log("afterEnter");
66 this.isshow = false;
67 }
68 }
69 })
70
71 </script>
72
73 </html>
四.完成品牌管理案例的vue中的動畫完成刪除提示
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 #app {
11 width: 600px;
12 margin: 10px auto;
13 }
14
15 .tb {
16 border-collapse: collapse;
17 width: 100%;
18 }
19
20 .tb th {
21 background-color: #0094ff;
22 color: white;
23 }
24
25 .tb td,
26 .tb th {
27 padding: 5px;
28 border: 1px solid black;
29 text-align: center;
30 }
31
32 .add {
33 padding: 5px;
34 border: 1px solid black;
35 margin-bottom: 10px;
36 }
37
38 .del li{
39 list-style: none;
40 padding: 10px;
41 }
42
43 .del{
44 position: absolute;
45 top:45%;
46 left: 45%;
47 width: 300px;
48 border: 1px solid rgba(0,0,0,0.2);
49 transition: all 0.5s;
50 }
51 </style>
52 <script src="../vue2.4.4.js"></script>
53 </head>
54
55 <body>
56 <div id="app">
57 <div class="add">
58 編號: <input id="id" v-color="color" v-focus type="text" v-model="id">品牌名稱: <input v-model="name" type="text">
59 <button @click="add">添加</button>
60 </div>
61 <div class="add">品牌名稱：<input type="text"></div>
62 <div>
63 <table class="tb">
64 <tr>
65 <th>編號</th>
66 <th>品牌名稱</th>
67 <th>創立時間</th>
68 <th>操做</th>
69 </tr>
70 <tr v-if="list.length <= 0">
71 <td colspan="4">沒有品牌數據</td>
72 </tr>
73 <!--加入: key="index" 時候必須把全部參數寫完整 -->
74 <tr v-for="(item,key,index) in list" :key="index">
75 <td>{{item.id}}</td>
76 <td>{{item.name}}</td>
77 <td>{{item.ctime | dateFrm("/")}}</td>
78 <!-- 使用vue來註冊事件時，咱們在dom元素中是看不到的 -->
79 <td><a href="javascript:void(0)" @click="del(item.id)">刪除</a></td>
80 </tr>
81 </table>
82 </div>
83
84 <transition
85 @before-enter="beforeEnter"
86 @enter="enter"
87 @after-enter ="afterEnter"
88 @before-leave="beforeLeave"
89 @leave="leave"
90 @after-leave ="afterLeave"
91 >
92 <div class="del" v-show="isshow">
93 <ul>
94 <li>您肯定要刪除當前數據嗎</li>
95 <li>
96 <button @click="delById">肯定</button>
97 <button @click="showClose">關閉</button>
98 </li>
99 </ul>
100 </div>
101 </transition>
102
103 </div>
104 </body>
105
106 </html>
107
108 <script>
109 // 使用全局過濾器（公有過濾器）
110 Vue.filter("dateFrm", function (time,spliceStr) {
111 // return "2017-11-16";
112 var date = new Date(time);
113 //獲得年
114 var year = date.getFullYear();
115 // 獲得月
116 var month = date.getMonth() + 1;
117 // 獲得日
118 var day = date.getDate();
119 return year + spliceStr + month + spliceStr + day;
120 });
121
122
123 // 先將自定義指令定義好
124 // directive有兩個參數
125 //參數一： 自定義指令 v-focus
126 //參數二： 對象，對象中能夠添加不少方法
127 // 添加一個inserted方法:而這個方法中又有兩個參數：
128 //參數一:el 當前使用自定義指令的對象
129 //參數二：obj 是指它(v-color="color" )後面設置的表達式
130 //{expression:"color",value:"red",}
131 Vue.directive("focus", {
132 inserted: function (el, obj) {
133 // console.log(el);
134 el.focus();
135 }
136 });
137 Vue.directive("color", {
138 inserted: function (el, obj) {
139 // obj.style.color = "red";
140 obj.style.color = obj.value;//????????????
141 console.log(obj.value);
142 }
143 });
144
145 var vm = new Vue({
146 el: "#app",
147 data: {
148 delId:"",// 用來將要刪除數據的id進行保存
149 isshow:false,
150 color: "green",
151 id: 0,
152 name: '',
153 list: [
154 { "id": 1, "name": "itcast", "ctime": Date() },
155 { "id": 2, "name": "黑馬", "ctime": Date() }
156 ]
157 },
158 // mounted(){
159 // this.getFocus()
160 // },
161 methods: {
162 add: function () {
163 //將id和namepush到list數組中
164 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
165 },
166 del: function (id) {
167 this.isshow = true;
168 // 將獲得的id保存到delId裏面
169 this.delId = id;
170 },
171 beforeEnter:function(el) {
172 el.style.left = "100%";
173 },
174 enter:function(el,done) {
175 el.offsetHeight;
176 el.style.left = "35%";
177 },
178 afterEnter:function(el){
179
180 },
181 beforeLeave:function(el){
182 el.style.left = "35%";
183 },
184 leave:function(el,done){
185 el.offsetHeight;
186 el.style.left = "100%";
187 setTimeout(function(){
188 done();
189 },500);
190 },
191 afterLeave:function(el){
192
193 },
194 showClose:function(el){
195 this.isshow = false;
196 },
197 delById:function() {
198 _this = this;
199 // 根據DelId刪除對應的數據
200 var index = this.list.findIndex(function(item){
201 return item.id ==_this.delId;
202 });
203 this.list.splice(index,1);
204 // 關閉刪除框
205 this.isshow = false;
206 }
207 }
208 });
209
210 </script>
相關文章
- 1. vue 過渡 動畫
- 2. vue-過渡動畫
- 3. vue 動畫過渡
- 4. Vue過渡&動畫
- 5. ViewAnimationUtils實現過渡動畫
- 6. Vue | 19 過渡&動畫-狀態過渡
- 7. HTML5實現動畫三種方式
- 8. Vue過渡與動畫
- 9. Vue之過渡與動畫
- 10. Vue之過渡動畫
- 更多相關文章...
- • Spring實例化Bean的三種方法 - Spring教程
- • Mybatis實現映射器的2種方式 - MyBatis教程
- • ☆基於Java Instrument的Agent實現
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. vue 過渡 動畫
- 2. vue-過渡動畫
- 3. vue 動畫過渡
- 4. Vue過渡&動畫
- 5. ViewAnimationUtils實現過渡動畫
- 6. Vue | 19 過渡&動畫-狀態過渡
- 7. HTML5實現動畫三種方式
- 8. Vue過渡與動畫
- 9. Vue之過渡與動畫
- 10. Vue之過渡動畫