Vue--过渡动画实现的三种方式
一.使用vue的transition标签结合css样式完成动画
<!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>
<style>
/* .v-enter-active,.v-leave-active{
transition:all 2s;
}
.v-enter,.v-leave-to{
margin-left: 100px;
}
.v-enter-to,.v-leave{
margin-left:0px;
} */
.show-enter-active,.show-leave-active{
transition:all 2s;
}
.show-enter,.show-leave-to{
margin-left: 100px;
}
.show-enter-to,.show-leave{
margin-left:0px;
}
</style>
<script src="../vue2.4.4.js"></script>
</head> <body>
<!-- 定义一个vue的管理区块，（MVVM中的View） -->
<!--
如果要使用动画效果:
第一种方式是使用transition标签加css样式结合完成：
1.给需要运动的元素加入transition标签
2.默认情况下如果控制了transition标签元素的显示和隐藏它会默认
给这个元素加入一些class
隐藏: 加入类名:
v-leave
v-leave-active
v-leave-to 显示: 加入类名:
v-enter 准备进行运动的状态(起始状态)
v-enter-active 整个运动状态
v-enter-to 整个运动状态(强调运动的结果，结束状态)
3.将来如果给transition设置一个name为“show”以后,将来所有的类的名称都需要改变，默认前缀为v-
如果加入了name属性，需要将v- 改为show-
-->
<div id="app">
<button @click="toggle">显示/隐藏</button><br>
<!-- <transition > -->
<transition name="show" >
<span class="show" v-show="isshow">it 传说</span>
</transition>
</div> </body> <script> // 实例化vue对象（MVVM中的View Model）
new Vue({
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el:'#app',
data:{
// 数据 （MVVM中的Model）
isshow:false
},
methods:{
toggle:function(){
this.isshow = !this.isshow;
}
}
})
</script>
</html>
二.利用animate.css结合transition实现动画
animate.css 演示地址 : https://daneden.github.io/animate.css/
@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;
}
实例代码:
<!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>
<link rel="stylesheet" href="../animate.css">
<script src="../vue2.4.4.js"></script>
</head> <body>
<!-- 定义一个vue的管理区块，（MVVM中的View） -->
<div id="app">
<button @click="toggle">显示/隐藏</button><br>
<transition
enter-active-class="animated fadeInRight"
leave-active-class="animated fadeOutRight"
>
<!-- 坑：span行内元素（行内元素没有宽）
应该改为块级元素
-->
<!-- <span class="show" v-show="isshow">it创业</span> -->
<div style="width:200px" class="show" v-show="isshow">it创业</div>
</transition>
</div>
</body> <script> // 实例化vue对象（MVVM中的View Model）
new Vue({
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el:'#app',
data:{
// 数据 （MVVM中的Model）
isshow:false
},
methods:{
toggle:function() {
this.isshow = !this.isshow;
}
}
})
</script>
</html>
三.利用 vue中的钩子函数实现动画
<!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>
<style>
.show {
transition: all 0.5s;
}
</style>
<script src="../vue2.4.4.js"></script>
</head> <body>
<!-- 定义一个vue的管理区块，（MVVM中的View） -->
<div id="app">
<button @click="toggle">显示/隐藏</button><br>
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div class="show" v-show="isshow">itcast 传智</div>
</transition>
</div> </body> <script>
// 实例化vue对象（MVVM中的View Model）
new Vue({
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el: '#app',
data: {
// 数据 （MVVM中的Model）
isshow: false
},
methods: {
toggle: function () {
this.isshow = !this.isshow;
},
// 以下三个与enter相关的方法只会在元素由隐藏变为显示的时候才会执行
// el:指的是当前调用这个方法的元素对象
// done:用来决定是否要执行后续的代码如果不执行这个方法，那么将来执行完before执行完enter以后动画就会停止
beforeEnter: function (el) {
console.log("beforeEnter");
// 当入场之前会执行 v-enter
el.style = "padding-left:100px";
},
enter: function (el, done) {
// 当进行的过程中每执行 v-enter-active
console.log("enter");
// 为了能让代码正常进行，在设置了结束状态后必须调用一下这个元素的
// offsetHeight / offsetWeight 只是为了让动画执行
el.offsetHeight; // 结束的状态最后啊写在enter中
el.style = "padding-left:0px"; // 执行done继续向下执行
done();
},
afterEnter: function (el) {
// 当执行完毕以后会执行
console.log("afterEnter");
this.isshow = false;
}
}
}) </script> </html>
四.完成品牌管理案例的vue中的动画完成删除提示
<!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>
<style>
#app {
width: 600px;
margin: 10px auto;
} .tb {
border-collapse: collapse;
width: 100%;
} .tb th {
background-color: #0094ff;
color: white;
} .tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
} .add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
} .del li{
list-style: none;
padding: 10px;
} .del{
position: absolute;
top:45%;
left: 45%;
width: 300px;
border: 1px solid rgba(0,0,0,0.2);
transition: all 0.5s;
}
</style>
<script src="../vue2.4.4.js"></script>
</head> <body>
<div id="app">
<div class="add">
编号: <input id="id" v-color="color" v-focus type="text" v-model="id">品牌名称: <input v-model="name" type="text">
<button @click="add">添加</button>
</div>
<div class="add">品牌名称：<input type="text"></div>
<div>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-if="list.length <= 0">
<td colspan="4">没有品牌数据</td>
</tr>
<!--加入: key="index" 时候必须把所有参数写完整 -->
<tr v-for="(item,key,index) in list" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime | dateFrm("/")}}</td>
<!-- 使用vue来注册事件时，我们在dom元素中是看不到的 -->
<td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
</tr>
</table>
</div> <transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter ="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave ="afterLeave"
>
<div class="del" v-show="isshow">
<ul>
<li>您确定要删除当前数据吗</li>
<li>
<button @click="delById">确定</button>
<button @click="showClose">关闭</button>
</li>
</ul>
</div>
</transition> </div>
</body> </html> <script>
// 使用全局过滤器（公有过滤器）
Vue.filter("dateFrm", function (time,spliceStr) {
// return "2017-11-16";
var date = new Date(time);
//得到年
var year = date.getFullYear();
// 得到月
var month = date.getMonth() + 1;
// 得到日
var day = date.getDate();
return year + spliceStr + month + spliceStr + day;
}); // 先将自定义指令定义好
// directive有两个参数
//参数一： 自定义指令 v-focus
//参数二： 对象，对象中可以添加很多方法
// 添加一个inserted方法:而这个方法中又有两个参数：
//参数一:el 当前使用自定义指令的对象
//参数二：obj 是指它(v-color="color" )后面设置的表达式
//{expression:"color",value:"red",}
Vue.directive("focus", {
inserted: function (el, obj) {
// console.log(el);
el.focus();
}
});
Vue.directive("color", {
inserted: function (el, obj) {
// obj.style.color = "red";
obj.style.color = obj.value;//????????????
console.log(obj.value);
}
}); var vm = new Vue({
el: "#app",
data: {
delId:"",// 用来将要删除数据的id进行保存
isshow:false,
color: "green",
id: 0,
name: '',
list: [
{ "id": 1, "name": "itcast", "ctime": Date() },
{ "id": 2, "name": "黑马", "ctime": Date() }
]
},
// mounted(){
// this.getFocus()
// },
methods: {
add: function () {
//将id和namepush到list数组中
this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
},
del: function (id) {
this.isshow = true;
// 将得到的id保存到delId里面
this.delId = id;
},
beforeEnter:function(el) {
el.style.left = "100%";
},
enter:function(el,done) {
el.offsetHeight;
el.style.left = "35%";
},
afterEnter:function(el){ },
beforeLeave:function(el){
el.style.left = "35%";
},
leave:function(el,done){
el.offsetHeight;
el.style.left = "100%";
setTimeout(function(){
done();
},500);
},
afterLeave:function(el){ },
showClose:function(el){
this.isshow = false;
},
delById:function() {
_this = this;
// 根据DelId删除对应的数据
var index = this.list.findIndex(function(item){
return item.id ==_this.delId;
});
this.list.splice(index,1);
// 关闭删除框
this.isshow = false;
}
}
}); </script>
Vue--过渡动画实现的三种方式的更多相关文章
- Vue组件之间通信的三种方式
最近在看梁颠编著的<Vue.js实战>一书,感觉颇有收获,特此记录一些比价实用的技巧. 组件是MVVM框架的核心设计思想,将各功能点组件化更利于我们在项目中复用,这类似于我们服务端面向对象 ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- vue路由传参的三种方式区别（params,query）
最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...
- VUE路由携带参数的三种方式
vue 通过路由在进行页面跳转时,会经常携带参数用于同步页面间的数据 路由中携带参数的方式总结如下: 路由定义示例: { name: 'list', path: '/list', component: ...
- vue路由传参的三种方式
方式一 通过query方式传参 这种情况下 query传递的参数会显示在url后面 this.$router.push({ path: '/detail', query: { id: id } }) ...
- vue中通过路由跳转的三种方式
原文:https://blog.csdn.net/qq_40072782/article/details/82533477 router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要 ...
- 加载gif动画的三种方式
GifView.h/** * 调用结束就开始播放动画,如果需要用户指定何时播放的话,只需要把timer的开始放到合适的位置.通过对CFDictonaryRaf 也就是gifProperties的改变, ...
- HTML5实现动画三种方式
编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有css3和javascript.通过合理的选择,来实现最优的实现. PS:由于显卡.录制 ...
- jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画
地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...
随机推荐
- Java+微信支付（下预购单+回调+退款+查询账单）
前言: 现在的APP的离不开微信支付, 现在项目里接入微信支付 , 微信支付的官方文档是:https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chap ...
- Windowns API 第24篇 WTSEnumerateSessions 枚举session信息
函数原型: BOOL WTSEnumerateSessions( HANDLE hServer, DWORD Reserved, DWORD Version, PWTS_SESSION_INFO* p ...
- Ionic login简单登录页面
1.login.html <ion-view view-title="登录" hide-nav-bar="true"> <div class= ...
- 说说前端开发中的SEO
SEO(Search Engine Optimization),就是传说中的搜索引擎优化,是指为了增加网页在搜索引擎自然搜索结果中的收录数量以及提升排序位置而做的优化行为.我认为这是一门说来简单,但操 ...
- 深入浅出 Java Concurrency (15): 锁机制 part 10 锁的一些其它问题[转]
主要谈谈锁的性能以及其它一些理论知识,内容主要的出处是<Java Concurrency in Practice>,结合自己的理解和实际应用对锁机制进行一个小小的总结. 首先需要强调的一点 ...
- Hibernate命名策略
hibernate的命名策略,可以减少对数据库标识符命名的维护,进一步减少这部份命名的重复性代码量,以提高维护. hibernate的命名方式,有两类,一类是显式命名,一类是隐式命名. 显式命名:在映 ...
- 原生JS与JQ获取元素的区别
刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...
- lumen使用CORS解决跨域问题
因为公司的业务是前后端分离,web前端和后端接口域名不同,所以存在跨域问题,开始使用的是jsonp解决,但是因为接口风格是rest的,还有delete.put等请求,jsonp就不够用了(涉及HTTP ...
- LeetCode412Fizz Buzz
写一个程序,输出从 1 到 n 数字的字符串表示. 1. 如果 n 是3的倍数,输出"Fizz": 2. 如果 n 是5的倍数,输出"Buzz": 3.如果 n ...
- 读书笔记--iBATIS in Action 目录
1.iBATIS的理念 2.iBATIS是什么 3.安装和配置iBATIS 4.使用以映射语句 5.执行非查询语句 6.使用高级查询技术 7.事务 8.使用动态SQL 9.使用高速缓存提高性能 10. ...