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(){ ...
随机推荐
- 01_Spring入门程序
一.什么是Spring? 1.Spring是分层的JavaSE/EE full-stack(一站式) 轻量级开源框架 2.spring是一个高度灵活的轻量级框架,其目的是降低企业级应用开发的复杂度. ...
- 关于dictionary和tuple充当函数参数
需要接收dict时,使用 **name: 需要接收tuple时,使用 *name: --> *name参数后面的任何数据会被认为是’keyword-only’,即它们只能被当作关键词而非参数使用 ...
- JZOJ5822 【NOIP提高A组模拟2018.8.16】 量子纠缠
这是一道很巧妙的题目. 今早,我调了好久,终于将它切掉了-- 题目 Description Input 第一行包含一个正整数 m,代表操作数. 接下来 m 行,每行可能有以下形式: 1 s 代表将数字 ...
- jQuery4操作表单+属性+样式
一.动态添加表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- IDEA设置maven项目的默认配置
IDEA设置maven项目的默认配置 问题描述 很多刚使用idea的人,用其创建maven工程时会遇到一个问题,明明给项目设置了新的maven配置(使用阿里镜像源或者自定义maven版本),但是重新打 ...
- 博客的页面定制CSS
我目前的博客CSS其实也是借用了别家的,来源:https://www.cnblogs.com/Penn000/p/6947472.html 注意使用的模板是:darkgreentrip 复制粘贴使用就 ...
- 同名的cookie会不会存在多个
cookie new了多个.同一个名字.会不会存在多个呢. //若果不设置Cookie的path,则名字相同的Cookie视为相同的Cookie,后面的覆盖前面的,注意:大小写敏感 Cookie c1 ...
- 多对多关联懒加载导致failed to lazily initialize a collection of role: 实体类, could not initialize proxy - no Session 追加配置fetch = FetchType.EAGER解决
一篇文章需要关联很多个标签,所以他们呈一对多(多对多)的关系 org.springframework.web.util.NestedServletException: Request processi ...
- Ubuntu 链接ln的使用:创建和删除符号链接
一 . 使用方式 ln [option] source_file dist_file (source_file是待建立链接文件的文件,dist_file是新创建的链接文件) -f 建立时,将同档案名删 ...
- SSM11-Redis---jedis的使用方法以及缓存同步
1. Jedis 需要把jedis依赖的jar包添加到工程中.Maven工程中需要把jedis的坐标添加到依赖. 推荐添加到服务层.E3-content-Service工程中. 1.1. 连接单机版 ...