From bcbf107eab3bff5b35e4a6351442be83e73e907c Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Sat, 8 Oct 2016 17:47:04 +0800 Subject: [PATCH 01/20] Prepare for Vue 2 --- .idea/copyright/profiles_settings.xml | 3 + .idea/jsLibraryMappings.xml | 6 + .idea/misc.xml | 76 ++ .idea/modules.xml | 8 + .idea/vcs.xml | 6 + .idea/vue-animate.iml | 8 + .idea/workspace.xml | 536 ++++++++ README.md | 5 +- dist/vue-animate.css | 1766 ++++++------------------- dist/vue-animate.min.css | 2 +- package.json | 19 +- src/make-transitions.less | 25 +- 12 files changed, 1111 insertions(+), 1349 deletions(-) create mode 100644 .idea/copyright/profiles_settings.xml create mode 100644 .idea/jsLibraryMappings.xml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml create mode 100644 .idea/vue-animate.iml create mode 100644 .idea/workspace.xml diff --git a/.idea/copyright/profiles_settings.xml b/.idea/copyright/profiles_settings.xml new file mode 100644 index 0000000..e7bedf3 --- /dev/null +++ b/.idea/copyright/profiles_settings.xml @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml new file mode 100644 index 0000000..d85eb81 --- /dev/null +++ b/.idea/jsLibraryMappings.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..37b2a60 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + Code SmellPHP + + + Code StylePHP + + + Control FlowPHP + + + DocBlocksJoomla! + + + GeneralPHP + + + Joomla! + + + PHP + + + PHPDocPHP + + + Probable bugsPHP + + + Type compatibilityPHP + + + UndefinedPHP + + + UnusedPHP + + + + + PhpUsageOfSilenceOperatorInspection + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..c21d21c --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/vue-animate.iml b/.idea/vue-animate.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/.idea/vue-animate.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 0000000..a099095 --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,536 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + true + DEFINITION_ORDER + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + project + + + true + + + + DIRECTORY + + false + + + + + + + + + 1475917123547 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/README.md b/README.md index 7c7d0d2..3831ae3 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ -#vue-animate +# vue-animate for Vue 2.0 + *Cross-browser CSS3 animation library* [![Version](https://img.shields.io/npm/v/vue-animate.svg?style=flat-square)](https://www.npmjs.com/package/vue-animate) @@ -6,7 +7,7 @@ A [Vue.js](http://vuejs.org/ "Vue.js") port of [Animate.css](https://github.com/daneden/animate.css "Animate.css"). For use with Vue's built-in transitions. - - **[DEMO](http://luoye.pw/vue-animate-demo/)** (courtesy of [luoye-fe](https://github.com/luoye-fe)) +**This is modified version of: https://github.com/haydenbbickerton/vue-animate for Vue 2.0** ##Installation ####HTML diff --git a/dist/vue-animate.css b/dist/vue-animate.css index bdd69e2..7745a6b 100644 --- a/dist/vue-animate.css +++ b/dist/vue-animate.css @@ -5,44 +5,6 @@ * Released under the MIT License. * Documentation: https://github.com/haydenbbickerton/vue-animate */ -@-webkit-keyframes bounceIn { - from, - 20%, - 40%, - 60%, - 80%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - 0% { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } - 20% { - -webkit-transform: scale3d(1.1, 1.1, 1.1); - transform: scale3d(1.1, 1.1, 1.1); - } - 40% { - -webkit-transform: scale3d(0.9, 0.9, 0.9); - transform: scale3d(0.9, 0.9, 0.9); - } - 60% { - opacity: 1; - -webkit-transform: scale3d(1.03, 1.03, 1.03); - transform: scale3d(1.03, 1.03, 1.03); - } - 80% { - -webkit-transform: scale3d(0.97, 0.97, 0.97); - transform: scale3d(0.97, 0.97, 0.97); - } - to { - opacity: 1; - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} @keyframes bounceIn { from, 20%, @@ -50,101 +12,42 @@ 60%, 80%, to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } 20% { - -webkit-transform: scale3d(1.1, 1.1, 1.1); - transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); } 40% { - -webkit-transform: scale3d(0.9, 0.9, 0.9); - transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; - -webkit-transform: scale3d(1.03, 1.03, 1.03); - transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); } 80% { - -webkit-transform: scale3d(0.97, 0.97, 0.97); - transform: scale3d(0.97, 0.97, 0.97); + transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} -@-webkit-keyframes bounceOut { - 20% { - -webkit-transform: scale3d(0.9, 0.9, 0.9); - transform: scale3d(0.9, 0.9, 0.9); - } - 50%, - 55% { - opacity: 1; - -webkit-transform: scale3d(1.1, 1.1, 1.1); - transform: scale3d(1.1, 1.1, 1.1); - } - to { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(1, 1, 1); } } @keyframes bounceOut { 20% { - -webkit-transform: scale3d(0.9, 0.9, 0.9); - transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; - -webkit-transform: scale3d(1.1, 1.1, 1.1); - transform: scale3d(1.1, 1.1, 1.1); - } - to { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(1.1, 1.1, 1.1); } -} -@-webkit-keyframes bounceInDown { - from, - 60%, - 75%, - 90%, to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - 0% { opacity: 0; - -webkit-transform: translate3d(0, -3000px, 0); - transform: translate3d(0, -3000px, 0); - } - 60% { - opacity: 1; - -webkit-transform: translate3d(0, 25px, 0); - transform: translate3d(0, 25px, 0); - } - 75% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); - } - 90% { - -webkit-transform: translate3d(0, 5px, 0); - transform: translate3d(0, 5px, 0); - } - to { - -webkit-transform: none; - transform: none; + transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceInDown { @@ -153,96 +56,38 @@ 75%, 90%, to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; - -webkit-transform: translate3d(0, -3000px, 0); - transform: translate3d(0, -3000px, 0); + transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; - -webkit-transform: translate3d(0, 25px, 0); - transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); } 75% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); } 90% { - -webkit-transform: translate3d(0, 5px, 0); - transform: translate3d(0, 5px, 0); - } - to { - -webkit-transform: none; - transform: none; - } -} -@-webkit-keyframes bounceOutDown { - 20% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); - } - 40%, - 45% { - opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); + transform: translate3d(0, 5px, 0); } to { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); + transform: none; } } @keyframes bounceOutDown { 20% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); } to { opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); - } -} -@-webkit-keyframes bounceInLeft { - from, - 60%, - 75%, - 90%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - 0% { - opacity: 0; - -webkit-transform: translate3d(-3000px, 0, 0); - transform: translate3d(-3000px, 0, 0); - } - 60% { - opacity: 1; - -webkit-transform: translate3d(25px, 0, 0); - transform: translate3d(25px, 0, 0); - } - 75% { - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); - } - 90% { - -webkit-transform: translate3d(5px, 0, 0); - transform: translate3d(5px, 0, 0); - } - to { - -webkit-transform: none; - transform: none; + transform: translate3d(0, 2000px, 0); } } @keyframes bounceInLeft { @@ -251,86 +96,34 @@ 75%, 90%, to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; - -webkit-transform: translate3d(-3000px, 0, 0); - transform: translate3d(-3000px, 0, 0); + transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; - -webkit-transform: translate3d(25px, 0, 0); - transform: translate3d(25px, 0, 0); + transform: translate3d(25px, 0, 0); } 75% { - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); } 90% { - -webkit-transform: translate3d(5px, 0, 0); - transform: translate3d(5px, 0, 0); - } - to { - -webkit-transform: none; - transform: none; - } -} -@-webkit-keyframes bounceOutLeft { - 20% { - opacity: 1; - -webkit-transform: translate3d(20px, 0, 0); - transform: translate3d(20px, 0, 0); + transform: translate3d(5px, 0, 0); } to { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); + transform: none; } } @keyframes bounceOutLeft { 20% { opacity: 1; - -webkit-transform: translate3d(20px, 0, 0); - transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0); } to { opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); - } -} -@-webkit-keyframes bounceInRight { - from, - 60%, - 75%, - 90%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - from { - opacity: 0; - -webkit-transform: translate3d(3000px, 0, 0); - transform: translate3d(3000px, 0, 0); - } - 60% { - opacity: 1; - -webkit-transform: translate3d(-25px, 0, 0); - transform: translate3d(-25px, 0, 0); - } - 75% { - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); - } - 90% { - -webkit-transform: translate3d(-5px, 0, 0); - transform: translate3d(-5px, 0, 0); - } - to { - -webkit-transform: none; - transform: none; + transform: translate3d(-2000px, 0, 0); } } @keyframes bounceInRight { @@ -339,86 +132,34 @@ 75%, 90%, to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; - -webkit-transform: translate3d(3000px, 0, 0); - transform: translate3d(3000px, 0, 0); + transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; - -webkit-transform: translate3d(-25px, 0, 0); - transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0); } 75% { - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); } 90% { - -webkit-transform: translate3d(-5px, 0, 0); - transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); } to { - -webkit-transform: none; - transform: none; - } -} -@-webkit-keyframes bounceOutRight { - 20% { - opacity: 1; - -webkit-transform: translate3d(-20px, 0, 0); - transform: translate3d(-20px, 0, 0); - } - to { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); + transform: none; } } @keyframes bounceOutRight { 20% { opacity: 1; - -webkit-transform: translate3d(-20px, 0, 0); - transform: translate3d(-20px, 0, 0); + transform: translate3d(-20px, 0, 0); } to { opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); - } -} -@-webkit-keyframes bounceInUp { - from, - 60%, - 75%, - 90%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - from { - opacity: 0; - -webkit-transform: translate3d(0, 3000px, 0); - transform: translate3d(0, 3000px, 0); - } - 60% { - opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); - } - 75% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); - } - 90% { - -webkit-transform: translate3d(0, -5px, 0); - transform: translate3d(0, -5px, 0); - } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translate3d(2000px, 0, 0); } } @keyframes bounceInUp { @@ -427,130 +168,107 @@ 75%, 90%, to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; - -webkit-transform: translate3d(0, 3000px, 0); - transform: translate3d(0, 3000px, 0); + transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); } 75% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); } 90% { - -webkit-transform: translate3d(0, -5px, 0); - transform: translate3d(0, -5px, 0); - } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} -@-webkit-keyframes bounceOutUp { - 20% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); - } - 40%, - 45% { - opacity: 1; - -webkit-transform: translate3d(0, 20px, 0); - transform: translate3d(0, 20px, 0); + transform: translate3d(0, -5px, 0); } to { - opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); + transform: translate3d(0, 0, 0); } } @keyframes bounceOutUp { 20% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; - -webkit-transform: translate3d(0, 20px, 0); - transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); } to { opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); } } -.bounce-transition, -.bounceDown-transition, .bounceLeft-transition, .bounceRight-transition, .bounceUp-transition { - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} -.bounce-enter, +.bounce-enter-active, .bounceIn { - -webkit-animation-name: bounceIn; - animation-name: bounceIn; + animation-name: bounceIn; } -.bounce-leave, +.bounce-leave-active, .bounceOut { - -webkit-animation-name: bounceOut; - animation-name: bounceOut; + animation-name: bounceOut; +} +.bounceUp-enter-active, +.bounceInUp, +.bounceUp-leave-active, +.bounceOutUp { + animation-duration: 1s; + animation-fill-mode: both; } -.bounceUp-enter, +.bounceUp-enter-active, .bounceInUp { - -webkit-animation-name: bounceInUp; - animation-name: bounceInUp; + animation-name: bounceInUp; } -.bounceUp-leave, +.bounceUp-leave-active, .bounceOutUp { - -webkit-animation-name: bounceOutUp; - animation-name: bounceOutUp; + animation-name: bounceOutUp; +} +.bounceRight-enter-active, +.bounceInRight, +.bounceRight-leave-active, +.bounceOutRight { + animation-duration: 1s; + animation-fill-mode: both; } -.bounceRight-enter, +.bounceRight-enter-active, .bounceInRight { - -webkit-animation-name: bounceInRight; - animation-name: bounceInRight; + animation-name: bounceInRight; } -.bounceRight-leave, +.bounceRight-leave-active, .bounceOutRight { - -webkit-animation-name: bounceOutRight; - animation-name: bounceOutRight; + animation-name: bounceOutRight; +} +.bounceLeft-enter-active, +.bounceInLeft, +.bounceLeft-leave-active, +.bounceOutLeft { + animation-duration: 1s; + animation-fill-mode: both; } -.bounceLeft-enter, +.bounceLeft-enter-active, .bounceInLeft { - -webkit-animation-name: bounceInLeft; - animation-name: bounceInLeft; + animation-name: bounceInLeft; } -.bounceLeft-leave, +.bounceLeft-leave-active, .bounceOutLeft { - -webkit-animation-name: bounceOutLeft; - animation-name: bounceOutLeft; + animation-name: bounceOutLeft; +} +.bounceDown-enter-active, +.bounceInDown, +.bounceDown-leave-active, +.bounceOutDown { + animation-duration: 1s; + animation-fill-mode: both; } -.bounceDown-enter, +.bounceDown-enter-active, .bounceInDown { - -webkit-animation-name: bounceInDown; - animation-name: bounceInDown; + animation-name: bounceInDown; } -.bounceDown-leave, +.bounceDown-leave-active, .bounceOutDown { - -webkit-animation-name: bounceOutDown; - animation-name: bounceOutDown; -} -@-webkit-keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } + animation-name: bounceOutDown; } @keyframes fadeIn { from { @@ -560,14 +278,6 @@ opacity: 1; } } -@-webkit-keyframes fadeOut { - from { - opacity: 1; - } - to { - opacity: 0; - } -} @keyframes fadeOut { from { opacity: 1; @@ -576,38 +286,14 @@ opacity: 0; } } -@-webkit-keyframes fadeInDown { - from { - opacity: 0; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - } - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } -} @keyframes fadeInDown { from { opacity: 0; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); } to { opacity: 1; - -webkit-transform: none; - transform: none; - } -} -@-webkit-keyframes fadeOutDown { - from { - opacity: 1; - } - to { - opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); + transform: none; } } @keyframes fadeOutDown { @@ -616,42 +302,17 @@ } to { opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - } -} -@-webkit-keyframes fadeInDownBig { - from { - opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); - } - to { - opacity: 1; - -webkit-transform: none; - transform: none; + transform: translate3d(0, 100%, 0); } } @keyframes fadeInDownBig { from { opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); } to { opacity: 1; - -webkit-transform: none; - transform: none; - } -} -@-webkit-keyframes fadeOutDownBig { - from { - opacity: 1; - } - to { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); + transform: none; } } @keyframes fadeOutDownBig { @@ -660,42 +321,17 @@ } to { opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); - } -} -@-webkit-keyframes fadeInLeft { - from { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } - to { - opacity: 1; - -webkit-transform: none; - transform: none; + transform: translate3d(0, 2000px, 0); } } @keyframes fadeInLeft { from { opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); } to { opacity: 1; - -webkit-transform: none; - transform: none; - } -} -@-webkit-keyframes fadeOutLeft { - from { - opacity: 1; - } - to { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); + transform: none; } } @keyframes fadeOutLeft { @@ -704,42 +340,17 @@ } to { opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } -} -@-webkit-keyframes fadeInLeftBig { - from { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); - } - to { - opacity: 1; - -webkit-transform: none; - transform: none; + transform: translate3d(-100%, 0, 0); } } @keyframes fadeInLeftBig { from { opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); } to { opacity: 1; - -webkit-transform: none; - transform: none; - } -} -@-webkit-keyframes fadeOutLeftBig { - from { - opacity: 1; - } - to { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); + transform: none; } } @keyframes fadeOutLeftBig { @@ -748,42 +359,17 @@ } to { opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); - } -} -@-webkit-keyframes fadeInRight { - from { - opacity: 0; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } - to { - opacity: 1; - -webkit-transform: none; - transform: none; + transform: translate3d(-2000px, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); } to { opacity: 1; - -webkit-transform: none; - transform: none; - } -} -@-webkit-keyframes fadeOutRight { - from { - opacity: 1; - } - to { - opacity: 0; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); + transform: none; } } @keyframes fadeOutRight { @@ -792,42 +378,17 @@ } to { opacity: 0; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } -} -@-webkit-keyframes fadeInRightBig { - from { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); - } - to { - opacity: 1; - -webkit-transform: none; - transform: none; + transform: translate3d(100%, 0, 0); } } @keyframes fadeInRightBig { from { opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); } to { opacity: 1; - -webkit-transform: none; - transform: none; - } -} -@-webkit-keyframes fadeOutRightBig { - from { - opacity: 1; - } - to { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); + transform: none; } } @keyframes fadeOutRightBig { @@ -836,42 +397,17 @@ } to { opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); - } -} -@-webkit-keyframes fadeInUp { - from { - opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - } - to { - opacity: 1; - -webkit-transform: none; - transform: none; + transform: translate3d(2000px, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); } to { opacity: 1; - -webkit-transform: none; - transform: none; - } -} -@-webkit-keyframes fadeOutUp { - from { - opacity: 1; - } - to { - opacity: 0; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); + transform: none; } } @keyframes fadeOutUp { @@ -880,32 +416,17 @@ } to { opacity: 0; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - } -} -@-webkit-keyframes fadeInUpBig { - from { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); - } - to { - opacity: 1; - -webkit-transform: none; - transform: none; + transform: translate3d(0, -100%, 0); } } @keyframes fadeInUpBig { from { opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); } to { opacity: 1; - -webkit-transform: none; - transform: none; + transform: none; } } @keyframes fadeOutUp { @@ -914,1053 +435,642 @@ } to { opacity: 0; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); } } -.fade-transition, -.fadeDown-transition, .fadeDownBig-transition, .fadeLeft-transition, .fadeLeftBig-transition, .fadeRight-transition, .fadeRightBig-transition, .fadeUp-transition, .fadeUpBig-transition { - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} -.fade-enter, +.fade-enter-active, .fadeIn { - -webkit-animation-name: fadeIn; - animation-name: fadeIn; + animation-name: fadeIn; } -.fade-leave, +.fade-leave-active, .fadeOut { - -webkit-animation-name: fadeOut; - animation-name: fadeOut; + animation-name: fadeOut; +} +.fadeUpBig-enter-active, +.fadeInUpBig, +.fadeUpBig-leave-active, +.fadeOutUpBig { + animation-duration: 1s; + animation-fill-mode: both; } -.fadeUpBig-enter, +.fadeUpBig-enter-active, .fadeInUpBig { - -webkit-animation-name: fadeInUpBig; - animation-name: fadeInUpBig; + animation-name: fadeInUpBig; } -.fadeUpBig-leave, +.fadeUpBig-leave-active, .fadeOutUpBig { - -webkit-animation-name: fadeOutUpBig; - animation-name: fadeOutUpBig; + animation-name: fadeOutUpBig; +} +.fadeUp-enter-active, +.fadeInUp, +.fadeUp-leave-active, +.fadeOutUp { + animation-duration: 1s; + animation-fill-mode: both; } -.fadeUp-enter, +.fadeUp-enter-active, .fadeInUp { - -webkit-animation-name: fadeInUp; - animation-name: fadeInUp; + animation-name: fadeInUp; } -.fadeUp-leave, +.fadeUp-leave-active, .fadeOutUp { - -webkit-animation-name: fadeOutUp; - animation-name: fadeOutUp; + animation-name: fadeOutUp; +} +.fadeRightBig-enter-active, +.fadeInRightBig, +.fadeRightBig-leave-active, +.fadeOutRightBig { + animation-duration: 1s; + animation-fill-mode: both; } -.fadeRightBig-enter, +.fadeRightBig-enter-active, .fadeInRightBig { - -webkit-animation-name: fadeInRightBig; - animation-name: fadeInRightBig; + animation-name: fadeInRightBig; } -.fadeRightBig-leave, +.fadeRightBig-leave-active, .fadeOutRightBig { - -webkit-animation-name: fadeOutRightBig; - animation-name: fadeOutRightBig; + animation-name: fadeOutRightBig; +} +.fadeRight-enter-active, +.fadeInRight, +.fadeRight-leave-active, +.fadeOutRight { + animation-duration: 1s; + animation-fill-mode: both; } -.fadeRight-enter, +.fadeRight-enter-active, .fadeInRight { - -webkit-animation-name: fadeInRight; - animation-name: fadeInRight; + animation-name: fadeInRight; } -.fadeRight-leave, +.fadeRight-leave-active, .fadeOutRight { - -webkit-animation-name: fadeOutRight; - animation-name: fadeOutRight; + animation-name: fadeOutRight; +} +.fadeLeftBig-enter-active, +.fadeInLeftBig, +.fadeLeftBig-leave-active, +.fadeOutLeftBig { + animation-duration: 1s; + animation-fill-mode: both; } -.fadeLeftBig-enter, +.fadeLeftBig-enter-active, .fadeInLeftBig { - -webkit-animation-name: fadeInLeftBig; - animation-name: fadeInLeftBig; + animation-name: fadeInLeftBig; } -.fadeLeftBig-leave, +.fadeLeftBig-leave-active, .fadeOutLeftBig { - -webkit-animation-name: fadeOutLeftBig; - animation-name: fadeOutLeftBig; + animation-name: fadeOutLeftBig; +} +.fadeLeft-enter-active, +.fadeInLeft, +.fadeLeft-leave-active, +.fadeOutLeft { + animation-duration: 1s; + animation-fill-mode: both; } -.fadeLeft-enter, +.fadeLeft-enter-active, .fadeInLeft { - -webkit-animation-name: fadeInLeft; - animation-name: fadeInLeft; + animation-name: fadeInLeft; } -.fadeLeft-leave, +.fadeLeft-leave-active, .fadeOutLeft { - -webkit-animation-name: fadeOutLeft; - animation-name: fadeOutLeft; + animation-name: fadeOutLeft; } -.fadeDownBig-enter, +.fadeDownBig-enter-active, +.fadeInDownBig, +.fadeDownBig-leave-active, +.fadeOutDownBig { + animation-duration: 1s; + animation-fill-mode: both; +} +.fadeDownBig-enter-active, .fadeInDownBig { - -webkit-animation-name: fadeInDownBig; - animation-name: fadeInDownBig; + animation-name: fadeInDownBig; } -.fadeDownBig-leave, +.fadeDownBig-leave-active, .fadeOutDownBig { - -webkit-animation-name: fadeOutDownBig; - animation-name: fadeOutDownBig; + animation-name: fadeOutDownBig; +} +.fadeDown-enter-active, +.fadeInDown, +.fadeDown-leave-active, +.fadeOutDown { + animation-duration: 1s; + animation-fill-mode: both; } -.fadeDown-enter, +.fadeDown-enter-active, .fadeInDown { - -webkit-animation-name: fadeInDown; - animation-name: fadeInDown; + animation-name: fadeInDown; } -.fadeDown-leave, +.fadeDown-leave-active, .fadeOutDown { - -webkit-animation-name: fadeOutDown; - animation-name: fadeOutDown; -} -@-webkit-keyframes rotateIn { - from { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, -200deg); - transform: rotate3d(0, 0, 1, -200deg); - opacity: 0; - } - to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: none; - transform: none; - opacity: 1; - } + animation-name: fadeOutDown; } @keyframes rotateIn { from { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, -200deg); - transform: rotate3d(0, 0, 1, -200deg); + transform-origin: center; + transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: none; - transform: none; + transform-origin: center; + transform: none; opacity: 1; } } -@-webkit-keyframes rotateOut { - from { - -webkit-transform-origin: center; - transform-origin: center; - opacity: 1; - } - to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, 200deg); - transform: rotate3d(0, 0, 1, 200deg); - opacity: 0; - } -} @keyframes rotateOut { from { - -webkit-transform-origin: center; - transform-origin: center; + transform-origin: center; opacity: 1; } to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, 200deg); - transform: rotate3d(0, 0, 1, 200deg); - opacity: 0; - } -} -@-webkit-keyframes rotateInDownLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); + transform-origin: center; + transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } } @keyframes rotateInDownLeft { from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: none; - transform: none; + transform-origin: left bottom; + transform: none; opacity: 1; } } -@-webkit-keyframes rotateOutDownLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - opacity: 1; - } - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } -} @keyframes rotateOutDownLeft { from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; + transform-origin: left bottom; opacity: 1; } to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } -@-webkit-keyframes rotateInDownRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } -} @keyframes rotateInDownRight { from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } -} -@-webkit-keyframes rotateOutDownRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; + transform-origin: right bottom; + transform: none; opacity: 1; } - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } } @keyframes rotateOutDownRight { from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; + transform-origin: right bottom; opacity: 1; } to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } -} -@-webkit-keyframes rotateInUpLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } } @keyframes rotateInUpLeft { from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } -} -@-webkit-keyframes rotateOutUpLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; + transform-origin: left bottom; + transform: none; opacity: 1; } - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } } @keyframes rotateOutUpLeft { from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; + transform-origin: left bottom; opacity: 1; } to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } -@-webkit-keyframes rotateInUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -90deg); - transform: rotate3d(0, 0, 1, -90deg); - opacity: 0; - } - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } -} @keyframes rotateInUpRight { from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -90deg); - transform: rotate3d(0, 0, 1, -90deg); + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } -} -@-webkit-keyframes rotateOutUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; + transform-origin: right bottom; + transform: none; opacity: 1; } - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 90deg); - transform: rotate3d(0, 0, 1, 90deg); - opacity: 0; - } } @keyframes rotateOutUpRight { from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; + transform-origin: right bottom; opacity: 1; } to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 90deg); - transform: rotate3d(0, 0, 1, 90deg); + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } -.rotate-transition, -.rotateDownLeft-transition, .rotateDownRight-transition, .rotateUpLeft-transition, .rotateUpRight-transition { - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} -.rotate-enter, +.rotate-enter-active, .rotateIn { - -webkit-animation-name: rotateIn; - animation-name: rotateIn; + animation-name: rotateIn; } -.rotate-leave, +.rotate-leave-active, .rotateOut { - -webkit-animation-name: rotateOut; - animation-name: rotateOut; + animation-name: rotateOut; +} +.rotateUpRight-enter-active, +.rotateInUpRight, +.rotateUpRight-leave-active, +.rotateOutUpRight { + animation-duration: 1s; + animation-fill-mode: both; } -.rotateUpRight-enter, +.rotateUpRight-enter-active, .rotateInUpRight { - -webkit-animation-name: rotateInUpRight; - animation-name: rotateInUpRight; + animation-name: rotateInUpRight; } -.rotateUpRight-leave, +.rotateUpRight-leave-active, .rotateOutUpRight { - -webkit-animation-name: rotateOutUpRight; - animation-name: rotateOutUpRight; + animation-name: rotateOutUpRight; +} +.rotateUpLeft-enter-active, +.rotateInUpLeft, +.rotateUpLeft-leave-active, +.rotateOutUpLeft { + animation-duration: 1s; + animation-fill-mode: both; } -.rotateUpLeft-enter, +.rotateUpLeft-enter-active, .rotateInUpLeft { - -webkit-animation-name: rotateInUpLeft; - animation-name: rotateInUpLeft; + animation-name: rotateInUpLeft; } -.rotateUpLeft-leave, +.rotateUpLeft-leave-active, .rotateOutUpLeft { - -webkit-animation-name: rotateOutUpLeft; - animation-name: rotateOutUpLeft; + animation-name: rotateOutUpLeft; } -.rotateDownRight-enter, +.rotateDownRight-enter-active, +.rotateInDownRight, +.rotateDownRight-leave-active, +.rotateOutDownRight { + animation-duration: 1s; + animation-fill-mode: both; +} +.rotateDownRight-enter-active, .rotateInDownRight { - -webkit-animation-name: rotateInDownRight; - animation-name: rotateInDownRight; + animation-name: rotateInDownRight; } -.rotateDownRight-leave, +.rotateDownRight-leave-active, .rotateOutDownRight { - -webkit-animation-name: rotateOutDownRight; - animation-name: rotateOutDownRight; + animation-name: rotateOutDownRight; +} +.rotateDownLeft-enter-active, +.rotateInDownLeft, +.rotateDownLeft-leave-active, +.rotateOutDownLeft { + animation-duration: 1s; + animation-fill-mode: both; } -.rotateDownLeft-enter, +.rotateDownLeft-enter-active, .rotateInDownLeft { - -webkit-animation-name: rotateInDownLeft; - animation-name: rotateInDownLeft; + animation-name: rotateInDownLeft; } -.rotateDownLeft-leave, +.rotateDownLeft-leave-active, .rotateOutDownLeft { - -webkit-animation-name: rotateOutDownLeft; - animation-name: rotateOutDownLeft; -} -@-webkit-keyframes slideInDown { - from { - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - visibility: visible; - } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } + animation-name: rotateOutDownLeft; } @keyframes slideInDown { from { - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); visibility: visible; } to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} -@-webkit-keyframes slideOutDown { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - to { - visibility: hidden; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); + transform: translate3d(0, 0, 0); } } @keyframes slideOutDown { from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } to { visibility: hidden; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - } -} -@-webkit-keyframes slideInLeft { - from { - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - visibility: visible; - } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translate3d(0, 100%, 0); } } @keyframes slideInLeft { from { - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); visibility: visible; } to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} -@-webkit-keyframes slideOutLeft { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - to { - visibility: hidden; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); + transform: translate3d(0, 0, 0); } } @keyframes slideOutLeft { from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } to { visibility: hidden; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } -} -@-webkit-keyframes slideInRight { - from { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - visibility: visible; - } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translate3d(-100%, 0, 0); } } @keyframes slideInRight { from { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); visibility: visible; } to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} -@-webkit-keyframes slideOutRight { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - to { - visibility: hidden; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); + transform: translate3d(0, 0, 0); } } @keyframes slideOutRight { from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } to { visibility: hidden; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } -} -@-webkit-keyframes slideInUp { - from { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - visibility: visible; - } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translate3d(100%, 0, 0); } } @keyframes slideInUp { from { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); visibility: visible; } to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} -@-webkit-keyframes slideOutUp { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - to { - visibility: hidden; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); + transform: translate3d(0, 0, 0); } } @keyframes slideOutUp { from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } to { visibility: hidden; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); } } -.slide-transition, -.slideDown-transition, .slideLeft-transition, .slideRight-transition, .slideUp-transition { - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} -.slide-enter, +.slide-enter-active, .slideIn { - -webkit-animation-name: slideIn; - animation-name: slideIn; + animation-name: slideIn; } -.slide-leave, +.slide-leave-active, .slideOut { - -webkit-animation-name: slideOut; - animation-name: slideOut; + animation-name: slideOut; +} +.slideUp-enter-active, +.slideInUp, +.slideUp-leave-active, +.slideOutUp { + animation-duration: 1s; + animation-fill-mode: both; } -.slideUp-enter, +.slideUp-enter-active, .slideInUp { - -webkit-animation-name: slideInUp; - animation-name: slideInUp; + animation-name: slideInUp; } -.slideUp-leave, +.slideUp-leave-active, .slideOutUp { - -webkit-animation-name: slideOutUp; - animation-name: slideOutUp; + animation-name: slideOutUp; +} +.slideRight-enter-active, +.slideInRight, +.slideRight-leave-active, +.slideOutRight { + animation-duration: 1s; + animation-fill-mode: both; } -.slideRight-enter, +.slideRight-enter-active, .slideInRight { - -webkit-animation-name: slideInRight; - animation-name: slideInRight; + animation-name: slideInRight; } -.slideRight-leave, +.slideRight-leave-active, .slideOutRight { - -webkit-animation-name: slideOutRight; - animation-name: slideOutRight; + animation-name: slideOutRight; +} +.slideLeft-enter-active, +.slideInLeft, +.slideLeft-leave-active, +.slideOutLeft { + animation-duration: 1s; + animation-fill-mode: both; } -.slideLeft-enter, +.slideLeft-enter-active, .slideInLeft { - -webkit-animation-name: slideInLeft; - animation-name: slideInLeft; + animation-name: slideInLeft; } -.slideLeft-leave, +.slideLeft-leave-active, .slideOutLeft { - -webkit-animation-name: slideOutLeft; - animation-name: slideOutLeft; + animation-name: slideOutLeft; +} +.slideDown-enter-active, +.slideInDown, +.slideDown-leave-active, +.slideOutDown { + animation-duration: 1s; + animation-fill-mode: both; } -.slideDown-enter, +.slideDown-enter-active, .slideInDown { - -webkit-animation-name: slideInDown; - animation-name: slideInDown; + animation-name: slideInDown; } -.slideDown-leave, +.slideDown-leave-active, .slideOutDown { - -webkit-animation-name: slideOutDown; - animation-name: slideOutDown; -} -@-webkit-keyframes zoomIn { - from { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } - 50% { - opacity: 1; - } + animation-name: slideOutDown; } @keyframes zoomIn { from { opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } -@-webkit-keyframes zoomOut { - from { - opacity: 1; - } - 50% { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } - to { - opacity: 0; - } -} @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } -@-webkit-keyframes zoomInDown { - from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } -} @keyframes zoomInDown { from { opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } -} -@-webkit-keyframes zoomOutDown { - 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - to { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } -} -@-webkit-keyframes zoomInLeft { - from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); + transform-origin: center bottom; + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { from { opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } -} -@-webkit-keyframes zoomOutLeft { - 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); - } - to { - opacity: 0; - -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); - transform: scale(0.1) translate3d(-2000px, 0, 0); - -webkit-transform-origin: left center; - transform-origin: left center; + transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutLeft { 40% { opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; - -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); - transform: scale(0.1) translate3d(-2000px, 0, 0); - -webkit-transform-origin: left center; - transform-origin: left center; - } -} -@-webkit-keyframes zoomInRight { - from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + transform: scale(0.1) translate3d(-2000px, 0, 0); + transform-origin: left center; } } @keyframes zoomInRight { from { opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } -} -@-webkit-keyframes zoomOutRight { - 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); - } - to { - opacity: 0; - -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); - transform: scale(0.1) translate3d(2000px, 0, 0); - -webkit-transform-origin: right center; - transform-origin: right center; + transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutRight { 40% { opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; - -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); - transform: scale(0.1) translate3d(2000px, 0, 0); - -webkit-transform-origin: right center; - transform-origin: right center; - } -} -@-webkit-keyframes zoomInUp { - from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + transform: scale(0.1) translate3d(2000px, 0, 0); + transform-origin: right center; } } @keyframes zoomInUp { from { opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } -@-webkit-keyframes zoomOutUp { +@keyframes zoomOutUp { 40% { opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); + transform-origin: center bottom; + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } -@keyframes zoomOutUp { - 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - to { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } -} -.zoom-transition, -.zoomDown-transition, .zoomLeft-transition, .zoomRight-transition, .zoomUp-transition { - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} -.zoom-enter, +.zoom-enter-active, .zoomIn { - -webkit-animation-name: zoomIn; - animation-name: zoomIn; + animation-name: zoomIn; } -.zoom-leave, +.zoom-leave-active, .zoomOut { - -webkit-animation-name: zoomOut; - animation-name: zoomOut; + animation-name: zoomOut; } -.zoomUp-enter, +.zoomUp-enter-active, +.zoomInUp, +.zoomUp-leave-active, +.zoomOutUp { + animation-duration: 1s; + animation-fill-mode: both; +} +.zoomUp-enter-active, .zoomInUp { - -webkit-animation-name: zoomInUp; - animation-name: zoomInUp; + animation-name: zoomInUp; } -.zoomUp-leave, +.zoomUp-leave-active, .zoomOutUp { - -webkit-animation-name: zoomOutUp; - animation-name: zoomOutUp; + animation-name: zoomOutUp; +} +.zoomRight-enter-active, +.zoomInRight, +.zoomRight-leave-active, +.zoomOutRight { + animation-duration: 1s; + animation-fill-mode: both; } -.zoomRight-enter, +.zoomRight-enter-active, .zoomInRight { - -webkit-animation-name: zoomInRight; - animation-name: zoomInRight; + animation-name: zoomInRight; } -.zoomRight-leave, +.zoomRight-leave-active, .zoomOutRight { - -webkit-animation-name: zoomOutRight; - animation-name: zoomOutRight; + animation-name: zoomOutRight; } -.zoomLeft-enter, +.zoomLeft-enter-active, +.zoomInLeft, +.zoomLeft-leave-active, +.zoomOutLeft { + animation-duration: 1s; + animation-fill-mode: both; +} +.zoomLeft-enter-active, .zoomInLeft { - -webkit-animation-name: zoomInLeft; - animation-name: zoomInLeft; + animation-name: zoomInLeft; } -.zoomLeft-leave, +.zoomLeft-leave-active, .zoomOutLeft { - -webkit-animation-name: zoomOutLeft; - animation-name: zoomOutLeft; + animation-name: zoomOutLeft; +} +.zoomDown-enter-active, +.zoomInDown, +.zoomDown-leave-active, +.zoomOutDown { + animation-duration: 1s; + animation-fill-mode: both; } -.zoomDown-enter, +.zoomDown-enter-active, .zoomInDown { - -webkit-animation-name: zoomInDown; - animation-name: zoomInDown; + animation-name: zoomInDown; } -.zoomDown-leave, +.zoomDown-leave-active, .zoomOutDown { - -webkit-animation-name: zoomOutDown; - animation-name: zoomOutDown; + animation-name: zoomOutDown; } diff --git a/dist/vue-animate.min.css b/dist/vue-animate.min.css index 292ff43..8efe199 100644 --- a/dist/vue-animate.min.css +++ b/dist/vue-animate.min.css @@ -3,4 +3,4 @@ * (c) 2016 Hayden Bickerton * Released under the MIT License. * Documentation: https://github.com/haydenbbickerton/vue-animate - */@-webkit-keyframes bounceIn{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@-webkit-keyframes bounceInDown{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInDown{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@-webkit-keyframes bounceInLeft{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@-webkit-keyframes bounceInRight{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInRight{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@-webkit-keyframes bounceInUp{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounce-transition,.bounceDown-transition,.bounceLeft-transition,.bounceRight-transition,.bounceUp-transition{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.bounce-enter,.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}.bounce-leave,.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}.bounceInUp,.bounceUp-enter{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}.bounceOutUp,.bounceUp-leave{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}.bounceInRight,.bounceRight-enter{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}.bounceOutRight,.bounceRight-leave{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}.bounceInLeft,.bounceLeft-enter{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}.bounceLeft-leave,.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}.bounceDown-enter,.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}.bounceDown-leave,.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@-webkit-keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeOutDown{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes fadeInDownBig{from{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{from{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeOutDownBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@-webkit-keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeOutLeft{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes fadeInLeftBig{from{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{from{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeOutLeftBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@-webkit-keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeOutRight{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes fadeInRightBig{from{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{from{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeOutRightBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeOutUp{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@-webkit-keyframes fadeInUpBig{from{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{from{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeOutUp{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fade-transition,.fadeDown-transition,.fadeDownBig-transition,.fadeLeft-transition,.fadeLeftBig-transition,.fadeRight-transition,.fadeRightBig-transition,.fadeUp-transition,.fadeUpBig-transition{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.fade-enter,.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}.fade-leave,.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}.fadeInUpBig,.fadeUpBig-enter{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}.fadeOutUpBig,.fadeUpBig-leave{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}.fadeInUp,.fadeUp-enter{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}.fadeOutUp,.fadeUp-leave{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}.fadeInRightBig,.fadeRightBig-enter{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}.fadeOutRightBig,.fadeRightBig-leave{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}.fadeInRight,.fadeRight-enter{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}.fadeOutRight,.fadeRight-leave{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}.fadeInLeftBig,.fadeLeftBig-enter{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}.fadeLeftBig-leave,.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}.fadeInLeft,.fadeLeft-enter{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}.fadeLeft-leave,.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}.fadeDownBig-enter,.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}.fadeDownBig-leave,.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}.fadeDown-enter,.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}.fadeDown-leave,.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes rotateIn{from{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{from{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@-webkit-keyframes rotateOut{from{-webkit-transform-origin:center;transform-origin:center;opacity:1}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{from{-webkit-transform-origin:center;transform-origin:center;opacity:1}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@-webkit-keyframes rotateInDownLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@-webkit-keyframes rotateOutDownLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}@-webkit-keyframes rotateInDownRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@-webkit-keyframes rotateOutDownRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@-webkit-keyframes rotateInUpLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@-webkit-keyframes rotateOutUpLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@-webkit-keyframes rotateInUpRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@-webkit-keyframes rotateOutUpRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotate-transition,.rotateDownLeft-transition,.rotateDownRight-transition,.rotateUpLeft-transition,.rotateUpRight-transition{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.rotate-enter,.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}.rotate-leave,.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}.rotateInUpRight,.rotateUpRight-enter{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}.rotateOutUpRight,.rotateUpRight-leave{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}.rotateInUpLeft,.rotateUpLeft-enter{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}.rotateOutUpLeft,.rotateUpLeft-leave{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}.rotateDownRight-enter,.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}.rotateDownRight-leave,.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}.rotateDownLeft-enter,.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}.rotateDownLeft-leave,.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes slideInDown{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInDown{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideOutDown{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes slideInLeft{from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInLeft{from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideOutLeft{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes slideInRight{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInRight{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideOutRight{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes slideInUp{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInUp{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideOutUp{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slide-transition,.slideDown-transition,.slideLeft-transition,.slideRight-transition,.slideUp-transition{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.slide-enter,.slideIn{-webkit-animation-name:slideIn;animation-name:slideIn}.slide-leave,.slideOut{-webkit-animation-name:slideOut;animation-name:slideOut}.slideInUp,.slideUp-enter{-webkit-animation-name:slideInUp;animation-name:slideInUp}.slideOutUp,.slideUp-leave{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}.slideInRight,.slideRight-enter{-webkit-animation-name:slideInRight;animation-name:slideInRight}.slideOutRight,.slideRight-leave{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}.slideInLeft,.slideLeft-enter{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}.slideLeft-leave,.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}.slideDown-enter,.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}.slideDown-leave,.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes zoomInDown{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@-webkit-keyframes zoomInLeft{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@-webkit-keyframes zoomInRight{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@-webkit-keyframes zoomInUp{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoom-transition,.zoomDown-transition,.zoomLeft-transition,.zoomRight-transition,.zoomUp-transition{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoom-enter,.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}.zoom-leave,.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}.zoomInUp,.zoomUp-enter{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}.zoomOutUp,.zoomUp-leave{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}.zoomInRight,.zoomRight-enter{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}.zoomOutRight,.zoomRight-leave{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}.zoomInLeft,.zoomLeft-enter{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}.zoomLeft-leave,.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}.zoomDown-enter,.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}.zoomDown-leave,.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown} \ No newline at end of file + */@keyframes bounceIn{from,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;transform:scale3d(0.3,0.3,0.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(0.9,0.9,0.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(0.97,0.97,0.97)}to{opacity:1;transform:scale3d(1,1,1)}}@keyframes bounceOut{20%{transform:scale3d(0.9,0.9,0.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(0.3,0.3,0.3)}}@keyframes bounceInDown{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}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}}@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)}}@keyframes bounceInLeft{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}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}}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes bounceInRight{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}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}}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}@keyframes bounceInUp{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}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)}}@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)}}.bounce-enter-active,.bounceIn{animation-name:bounceIn}.bounce-leave-active,.bounceOut{animation-name:bounceOut}.bounceUp-enter-active,.bounceInUp,.bounceUp-leave-active,.bounceOutUp{animation-duration:1s;animation-fill-mode:both}.bounceUp-enter-active,.bounceInUp{animation-name:bounceInUp}.bounceUp-leave-active,.bounceOutUp{animation-name:bounceOutUp}.bounceRight-enter-active,.bounceInRight,.bounceRight-leave-active,.bounceOutRight{animation-duration:1s;animation-fill-mode:both}.bounceRight-enter-active,.bounceInRight{animation-name:bounceInRight}.bounceRight-leave-active,.bounceOutRight{animation-name:bounceOutRight}.bounceLeft-enter-active,.bounceInLeft,.bounceLeft-leave-active,.bounceOutLeft{animation-duration:1s;animation-fill-mode:both}.bounceLeft-enter-active,.bounceInLeft{animation-name:bounceInLeft}.bounceLeft-leave-active,.bounceOutLeft{animation-name:bounceOutLeft}.bounceDown-enter-active,.bounceInDown,.bounceDown-leave-active,.bounceOutDown{animation-duration:1s;animation-fill-mode:both}.bounceDown-enter-active,.bounceInDown{animation-name:bounceInDown}.bounceDown-leave-active,.bounceOutDown{animation-name:bounceOutDown}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}@keyframes fadeOutDown{from{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}@keyframes fadeInDownBig{from{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:none}}@keyframes fadeOutDownBig{from{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutLeft{from{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}@keyframes fadeInLeftBig{from{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutLeftBig{from{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutRight{from{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}@keyframes fadeInRightBig{from{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutRightBig{from{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}@keyframes fadeOutUp{from{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}@keyframes fadeInUpBig{from{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:none}}@keyframes fadeOutUp{from{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}.fade-enter-active,.fadeIn{animation-name:fadeIn}.fade-leave-active,.fadeOut{animation-name:fadeOut}.fadeUpBig-enter-active,.fadeInUpBig,.fadeUpBig-leave-active,.fadeOutUpBig{animation-duration:1s;animation-fill-mode:both}.fadeUpBig-enter-active,.fadeInUpBig{animation-name:fadeInUpBig}.fadeUpBig-leave-active,.fadeOutUpBig{animation-name:fadeOutUpBig}.fadeUp-enter-active,.fadeInUp,.fadeUp-leave-active,.fadeOutUp{animation-duration:1s;animation-fill-mode:both}.fadeUp-enter-active,.fadeInUp{animation-name:fadeInUp}.fadeUp-leave-active,.fadeOutUp{animation-name:fadeOutUp}.fadeRightBig-enter-active,.fadeInRightBig,.fadeRightBig-leave-active,.fadeOutRightBig{animation-duration:1s;animation-fill-mode:both}.fadeRightBig-enter-active,.fadeInRightBig{animation-name:fadeInRightBig}.fadeRightBig-leave-active,.fadeOutRightBig{animation-name:fadeOutRightBig}.fadeRight-enter-active,.fadeInRight,.fadeRight-leave-active,.fadeOutRight{animation-duration:1s;animation-fill-mode:both}.fadeRight-enter-active,.fadeInRight{animation-name:fadeInRight}.fadeRight-leave-active,.fadeOutRight{animation-name:fadeOutRight}.fadeLeftBig-enter-active,.fadeInLeftBig,.fadeLeftBig-leave-active,.fadeOutLeftBig{animation-duration:1s;animation-fill-mode:both}.fadeLeftBig-enter-active,.fadeInLeftBig{animation-name:fadeInLeftBig}.fadeLeftBig-leave-active,.fadeOutLeftBig{animation-name:fadeOutLeftBig}.fadeLeft-enter-active,.fadeInLeft,.fadeLeft-leave-active,.fadeOutLeft{animation-duration:1s;animation-fill-mode:both}.fadeLeft-enter-active,.fadeInLeft{animation-name:fadeInLeft}.fadeLeft-leave-active,.fadeOutLeft{animation-name:fadeOutLeft}.fadeDownBig-enter-active,.fadeInDownBig,.fadeDownBig-leave-active,.fadeOutDownBig{animation-duration:1s;animation-fill-mode:both}.fadeDownBig-enter-active,.fadeInDownBig{animation-name:fadeInDownBig}.fadeDownBig-leave-active,.fadeOutDownBig{animation-name:fadeOutDownBig}.fadeDown-enter-active,.fadeInDown,.fadeDown-leave-active,.fadeOutDown{animation-duration:1s;animation-fill-mode:both}.fadeDown-enter-active,.fadeInDown{animation-name:fadeInDown}.fadeDown-leave-active,.fadeOutDown{animation-name:fadeOutDown}@keyframes rotateIn{from{transform-origin:center;transform:rotate3d(0,0,1,-200deg);opacity:0}to{transform-origin:center;transform:none;opacity:1}}@keyframes rotateOut{from{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateInDownLeft{from{transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}@keyframes rotateOutDownLeft{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0,0,1,45deg);opacity:0}}@keyframes rotateInDownRight{from{transform-origin:right bottom;transform:rotate3d(0,0,1,45deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}@keyframes rotateOutDownRight{from{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateInUpLeft{from{transform-origin:left bottom;transform:rotate3d(0,0,1,45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}@keyframes rotateOutUpLeft{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateInUpRight{from{transform-origin:right bottom;transform:rotate3d(0,0,1,-90deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}@keyframes rotateOutUpRight{from{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate3d(0,0,1,90deg);opacity:0}}.rotate-enter-active,.rotateIn{animation-name:rotateIn}.rotate-leave-active,.rotateOut{animation-name:rotateOut}.rotateUpRight-enter-active,.rotateInUpRight,.rotateUpRight-leave-active,.rotateOutUpRight{animation-duration:1s;animation-fill-mode:both}.rotateUpRight-enter-active,.rotateInUpRight{animation-name:rotateInUpRight}.rotateUpRight-leave-active,.rotateOutUpRight{animation-name:rotateOutUpRight}.rotateUpLeft-enter-active,.rotateInUpLeft,.rotateUpLeft-leave-active,.rotateOutUpLeft{animation-duration:1s;animation-fill-mode:both}.rotateUpLeft-enter-active,.rotateInUpLeft{animation-name:rotateInUpLeft}.rotateUpLeft-leave-active,.rotateOutUpLeft{animation-name:rotateOutUpLeft}.rotateDownRight-enter-active,.rotateInDownRight,.rotateDownRight-leave-active,.rotateOutDownRight{animation-duration:1s;animation-fill-mode:both}.rotateDownRight-enter-active,.rotateInDownRight{animation-name:rotateInDownRight}.rotateDownRight-leave-active,.rotateOutDownRight{animation-name:rotateOutDownRight}.rotateDownLeft-enter-active,.rotateInDownLeft,.rotateDownLeft-leave-active,.rotateOutDownLeft{animation-duration:1s;animation-fill-mode:both}.rotateDownLeft-enter-active,.rotateInDownLeft{animation-name:rotateInDownLeft}.rotateDownLeft-leave-active,.rotateOutDownLeft{animation-name:rotateOutDownLeft}@keyframes slideInDown{from{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutDown{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}@keyframes slideInLeft{from{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutLeft{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}@keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutRight{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}@keyframes slideInUp{from{transform:translate3d(0,100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutUp{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}.slide-enter-active,.slideIn{animation-name:slideIn}.slide-leave-active,.slideOut{animation-name:slideOut}.slideUp-enter-active,.slideInUp,.slideUp-leave-active,.slideOutUp{animation-duration:1s;animation-fill-mode:both}.slideUp-enter-active,.slideInUp{animation-name:slideInUp}.slideUp-leave-active,.slideOutUp{animation-name:slideOutUp}.slideRight-enter-active,.slideInRight,.slideRight-leave-active,.slideOutRight{animation-duration:1s;animation-fill-mode:both}.slideRight-enter-active,.slideInRight{animation-name:slideInRight}.slideRight-leave-active,.slideOutRight{animation-name:slideOutRight}.slideLeft-enter-active,.slideInLeft,.slideLeft-leave-active,.slideOutLeft{animation-duration:1s;animation-fill-mode:both}.slideLeft-enter-active,.slideInLeft{animation-name:slideInLeft}.slideLeft-leave-active,.slideOutLeft{animation-name:slideOutLeft}.slideDown-enter-active,.slideInDown,.slideDown-leave-active,.slideOutDown{animation-duration:1s;animation-fill-mode:both}.slideDown-enter-active,.slideInDown{animation-name:slideInDown}.slideDown-leave-active,.slideOutDown{animation-name:slideOutDown}@keyframes zoomIn{from{opacity:0;transform:scale3d(0.3,0.3,0.3)}50%{opacity:1}}@keyframes zoomOut{from{opacity:1}50%{opacity:0;transform:scale3d(0.3,0.3,0.3)}to{opacity:0}}@keyframes zoomInDown{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}to{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomInLeft{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(0.1) translate3d(-2000px,0,0);transform-origin:left center}}@keyframes zoomInRight{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(0.1) translate3d(2000px,0,0);transform-origin:right center}}@keyframes zoomInUp{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}to{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,-2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}.zoom-enter-active,.zoomIn{animation-name:zoomIn}.zoom-leave-active,.zoomOut{animation-name:zoomOut}.zoomUp-enter-active,.zoomInUp,.zoomUp-leave-active,.zoomOutUp{animation-duration:1s;animation-fill-mode:both}.zoomUp-enter-active,.zoomInUp{animation-name:zoomInUp}.zoomUp-leave-active,.zoomOutUp{animation-name:zoomOutUp}.zoomRight-enter-active,.zoomInRight,.zoomRight-leave-active,.zoomOutRight{animation-duration:1s;animation-fill-mode:both}.zoomRight-enter-active,.zoomInRight{animation-name:zoomInRight}.zoomRight-leave-active,.zoomOutRight{animation-name:zoomOutRight}.zoomLeft-enter-active,.zoomInLeft,.zoomLeft-leave-active,.zoomOutLeft{animation-duration:1s;animation-fill-mode:both}.zoomLeft-enter-active,.zoomInLeft{animation-name:zoomInLeft}.zoomLeft-leave-active,.zoomOutLeft{animation-name:zoomOutLeft}.zoomDown-enter-active,.zoomInDown,.zoomDown-leave-active,.zoomOutDown{animation-duration:1s;animation-fill-mode:both}.zoomDown-enter-active,.zoomInDown{animation-name:zoomInDown}.zoomDown-leave-active,.zoomOutDown{animation-name:zoomOutDown} \ No newline at end of file diff --git a/package.json b/package.json index cebcf8a..e05f74e 100644 --- a/package.json +++ b/package.json @@ -1,19 +1,19 @@ { - "name": "vue-animate", - "version": "0.0.4", - "description": "LESS cross-browser animation library, for use with Vue.js. Ported from Animate.css.", + "name": "vue2-animate", + "version": "1.0", + "description": "LESS cross-browser animation library, for use with Vue.js 2.0. Ported from Animate.css.", "author": { - "name": "Hayden Bickerton", - "email": "haydenbbickerton@gmail.com" + "name": "Simon Asika", + "email": "asika32764@gmail.com" }, - "homepage": "https://github.com/haydenbbickerton/vue-animate", + "homepage": "https://github.com/asika32764/vue2-animate", "license": "MIT", "repository": { "type": "git", - "url": "git+https://github.com/haydenbbickerton/vue-animate.git" + "url": "git+https://github.com/asika32764/vue2-animate.git" }, "bugs": { - "url": "https://github.com/haydenbbickerton/vue-animate/issues" + "url": "https://github.com/asika32764/vue2-animate/issues" }, "keywords": [ "less", @@ -36,6 +36,7 @@ "less-plugin-clean-css": "^1.5.0" }, "scripts": { - "build": "lessc --autoprefix='> 5%' src/vue-animate.less > dist/vue-animate.css && lessc --autoprefix='> 5%' --clean-css='--compatibility=ie8 --advanced' src/vue-animate.less > dist/vue-animate.min.css" + "build": "lessc src/vue-animate.less > dist/vue-animate.css", + "minify": "lessc --clean-css='--compatibility=ie8 --advanced' src/vue-animate.less > dist/vue-animate.min.css" } } diff --git a/src/make-transitions.less b/src/make-transitions.less index 44693ac..82db654 100644 --- a/src/make-transitions.less +++ b/src/make-transitions.less @@ -3,19 +3,20 @@ // We'll make a single rule for all transitions that // sets the animation duration. This is basically the // stock 'animate' class from Animate.css. - @classesJoin: replace(~'@{names}', ', ', '-transition, .@{base}', g); + @classesJoin: replace(~'@{names}', ', ', '-enter-active, .@{base}', g); - .@{base}-transition, .@{base}@{classesJoin}-transition { - animation-duration: @animationDuration; - animation-fill-mode: both; - } + //.@{base}-enter-active, .@{base}-leave-active, + //.@{base}@{classesJoin}-leave-active { + // animation-duration: @animationDuration; + // animation-fill-mode: both; + //} // Entrance/Exit for the base class - .@{base}-enter, .@{base}In { + .@{base}-enter-active, .@{base}In { animation-name: ~'@{base}In'; } - .@{base}-leave, .@{base}Out { + .@{base}-leave-active, .@{base}Out { animation-name: ~'@{base}Out'; } @@ -24,10 +25,16 @@ .-(@i: length(@names)) when (@i > 0) { @name: extract(@names, @i); - .@{base}@{name}-enter, .@{base}In@{name} { + .@{base}@{name}-enter-active, .@{base}In@{name}, + .@{base}@{name}-leave-active, .@{base}Out@{name} { + animation-duration: @animationDuration; + animation-fill-mode: both; + } + + .@{base}@{name}-enter-active, .@{base}In@{name} { animation-name: ~'@{base}In@{name}'; } - .@{base}@{name}-leave, .@{base}Out@{name} { + .@{base}@{name}-leave-active, .@{base}Out@{name} { animation-name: ~'@{base}Out@{name}'; } .-((@i - 1)); From c1dc0f32e93245e3f975fe0ad66df8337b16d848 Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Sat, 8 Oct 2016 17:51:09 +0800 Subject: [PATCH 02/20] Update version --- .idea/workspace.xml | 44 ++++++++++++++++++++++++++++---------------- package.json | 2 +- 2 files changed, 29 insertions(+), 17 deletions(-) diff --git a/.idea/workspace.xml b/.idea/workspace.xml index a099095..3351a4b 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -2,13 +2,7 @@ - - - - - - @@ -63,13 +57,23 @@ - + + + + + + + + + + + @@ -103,8 +107,8 @@ - - + + @@ -384,16 +388,16 @@ - - + @@ -404,7 +408,7 @@ - + @@ -518,16 +522,24 @@ - + + + + + + + + + - - + + diff --git a/package.json b/package.json index e05f74e..f321924 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue2-animate", - "version": "1.0", + "version": "1.0.0", "description": "LESS cross-browser animation library, for use with Vue.js 2.0. Ported from Animate.css.", "author": { "name": "Simon Asika", From ba0b7fa803845b6777695fdc28662d0a94678408 Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Sat, 8 Oct 2016 17:54:27 +0800 Subject: [PATCH 03/20] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 3831ae3..ea026fc 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,8 @@ *Cross-browser CSS3 animation library* -[![Version](https://img.shields.io/npm/v/vue-animate.svg?style=flat-square)](https://www.npmjs.com/package/vue-animate) -[![License](https://img.shields.io/npm/l/vue-animate.svg?style=flat-square)](LICENSE) +[![Version](https://img.shields.io/npm/v/vue2-animate.svg?style=flat-square)](https://www.npmjs.com/package/vue2-animate) +[![License](https://img.shields.io/npm/l/vue2-animate.svg?style=flat-square)](LICENSE) A [Vue.js](http://vuejs.org/ "Vue.js") port of [Animate.css](https://github.com/daneden/animate.css "Animate.css"). For use with Vue's built-in transitions. From 641962e1d6d59c8b5815941feeeea71552b0488d Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Sat, 8 Oct 2016 17:55:03 +0800 Subject: [PATCH 04/20] Remove idea --- .gitignore | 3 +- .idea/copyright/profiles_settings.xml | 3 - .idea/jsLibraryMappings.xml | 6 - .idea/misc.xml | 76 ---- .idea/modules.xml | 8 - .idea/vcs.xml | 6 - .idea/vue-animate.iml | 8 - .idea/workspace.xml | 548 -------------------------- 8 files changed, 2 insertions(+), 656 deletions(-) delete mode 100644 .idea/copyright/profiles_settings.xml delete mode 100644 .idea/jsLibraryMappings.xml delete mode 100644 .idea/misc.xml delete mode 100644 .idea/modules.xml delete mode 100644 .idea/vcs.xml delete mode 100644 .idea/vue-animate.iml delete mode 100644 .idea/workspace.xml diff --git a/.gitignore b/.gitignore index 1c3e58b..130339d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules .DS_Store -*.log \ No newline at end of file +*.log +.idea \ No newline at end of file diff --git a/.idea/copyright/profiles_settings.xml b/.idea/copyright/profiles_settings.xml deleted file mode 100644 index e7bedf3..0000000 --- a/.idea/copyright/profiles_settings.xml +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml deleted file mode 100644 index d85eb81..0000000 --- a/.idea/jsLibraryMappings.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml deleted file mode 100644 index 37b2a60..0000000 --- a/.idea/misc.xml +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - Code SmellPHP - - - Code StylePHP - - - Control FlowPHP - - - DocBlocksJoomla! - - - GeneralPHP - - - Joomla! - - - PHP - - - PHPDocPHP - - - Probable bugsPHP - - - Type compatibilityPHP - - - UndefinedPHP - - - UnusedPHP - - - - - PhpUsageOfSilenceOperatorInspection - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml deleted file mode 100644 index c21d21c..0000000 --- a/.idea/modules.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml deleted file mode 100644 index 94a25f7..0000000 --- a/.idea/vcs.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/.idea/vue-animate.iml b/.idea/vue-animate.iml deleted file mode 100644 index c956989..0000000 --- a/.idea/vue-animate.iml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/workspace.xml b/.idea/workspace.xml deleted file mode 100644 index 3351a4b..0000000 --- a/.idea/workspace.xml +++ /dev/null @@ -1,548 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - true - DEFINITION_ORDER - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - project - - - true - - - - DIRECTORY - - false - - - - - - - - - 1475917123547 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file From a338dc592c7ea17158ace5fe611c719ee4835973 Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Sat, 8 Oct 2016 17:59:04 +0800 Subject: [PATCH 05/20] Update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f321924..840378d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue2-animate", - "version": "1.0.0", + "version": "1.0.1", "description": "LESS cross-browser animation library, for use with Vue.js 2.0. Ported from Animate.css.", "author": { "name": "Simon Asika", From 13e0fd6d916d938196946f77f883bdbd68b377f5 Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Sat, 8 Oct 2016 18:06:14 +0800 Subject: [PATCH 06/20] Update README.md --- README.md | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index ea026fc..d70117f 100644 --- a/README.md +++ b/README.md @@ -44,12 +44,19 @@ Include the stylesheet: Use [Vue.js transitions](http://vuejs.org/guide/transitions.html "Vue.js Transitions") as you normally would, but for the transition name you will use one of [Animate.css animations](https://github.com/daneden/animate.css#basic-usage "animations") **removing** the ***In/Out*** from the name. For example, if I want to use *fadeInLeft* and *fadeOutLeft* on my element, I'll write: - ```html -
hello
- ``` +```html + +
  • + {{ item }} +
    • +     +``` enter/leave is already written in the stylesheet, so just remove *In/Out* from the name and you're golden. ####Custom Transition Classes + +> The below is old documentation, please see Vue 2.0 doc: https://vuejs.org/guide/transitions.html + As of 0.0.3, Animate.css's original classnames are supported on enter/leave transitions. So if you're going to use [Custom Transition Classes](http://vuejs.org/guide/transitions.html#Custom-Transition-Classes "Custom Transition Classes"), you can either add *-enter/-leave* to the classes: ```js From 0a46d970ce2dd9d72dd650c91a5b022682171768 Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Sat, 8 Oct 2016 23:06:05 +0800 Subject: [PATCH 07/20] Update README.md --- README.md | 36 ++++++++++++++++++++---------------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index d70117f..1dd2913 100644 --- a/README.md +++ b/README.md @@ -55,24 +55,28 @@ Include the stylesheet: ####Custom Transition Classes -> The below is old documentation, please see Vue 2.0 doc: https://vuejs.org/guide/transitions.html +Animate.css's original classnames are supported on enter/leave transitions. So if you're going to use [Custom Transition Classes](http://vuejs.org/guide/transitions.html#Custom-Transition-Classes "Custom Transition Classes"), you can either add *-enter/-leave* to the classes: - As of 0.0.3, Animate.css's original classnames are supported on enter/leave transitions. So if you're going to use [Custom Transition Classes](http://vuejs.org/guide/transitions.html#Custom-Transition-Classes "Custom Transition Classes"), you can either add *-enter/-leave* to the classes: - - ```js - Vue.transition('bounce', { - enterClass: 'bounceLeft-enter', - leaveClass: 'bounceRight-leave' - }) - ``` +```html + +

    hello

    +     +``` Or use the regular *In/Out* syntax: - - ```js - Vue.transition('bounce', { - enterClass: 'bounceInLeft', - leaveClass: 'bounceOutRight' - }) - ``` + +```html + +

    hello

    +     +``` ####Supported Animations Not all [Animate.css animations](https://github.com/daneden/animate.css#basic-usage "animations") are supported at the moment. Here is a list of what's in vue-animate (aka - *what you can put in the transition="x"* attribute) as of right now: From c8c5bcdb6e80a2a5d0263cf41e071fa0fd0d592d Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Sat, 8 Oct 2016 23:07:53 +0800 Subject: [PATCH 08/20] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 1dd2913..c47b92a 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ Include the stylesheet: ####npm If you're on webpack and using the [css-loader](https://github.com/webpack/css-loader "css loader"), you can use something like this: ```shell - npm install --save vue-animate + npm install --save vue2-animate ``` ```js require('vue-animate/dist/vue-animate.min.css') @@ -33,7 +33,7 @@ Include the stylesheet: ####Building ```shell - git clone https://github.com/haydenbbickerton/vue-animate.git + git clone https://github.com/asika32764/vue2-animate.git cd vue-animate npm install npm run build #Compiled .css files go to the dist folder From 70dc29133f3b180f4a916835ba78edad70df704e Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Sat, 8 Oct 2016 23:10:09 +0800 Subject: [PATCH 09/20] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c47b92a..2846ebe 100644 --- a/README.md +++ b/README.md @@ -45,8 +45,8 @@ Include the stylesheet: For example, if I want to use *fadeInLeft* and *fadeOutLeft* on my element, I'll write: ```html - -
  • + +
  • {{ item }}
    • From 39ae86e71f1a716e738ac57bd7b12d2b0f259dac Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Sat, 8 Oct 2016 23:30:04 +0800 Subject: [PATCH 10/20] Update version --- src/vue-animate.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/vue-animate.less b/src/vue-animate.less index 7292675..62c411c 100644 --- a/src/vue-animate.less +++ b/src/vue-animate.less @@ -1,10 +1,10 @@ @charset "UTF-8"; /*! - * vue-animate v0.0.4 - * (c) 2016 Hayden Bickerton + * vue2-animate v1.0.2 + * (c) 2016 Simon Asika * Released under the MIT License. - * Documentation: https://github.com/haydenbbickerton/vue-animate + * Documentation: https://github.com/asika32764/vue2-animate */ @animationDuration: 1s; From 8c531d6bf70ce6065163ef7185a437ca565b73ee Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Sat, 8 Oct 2016 23:30:34 +0800 Subject: [PATCH 11/20] Update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 840378d..c1ccbdc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue2-animate", - "version": "1.0.1", + "version": "1.0.2", "description": "LESS cross-browser animation library, for use with Vue.js 2.0. Ported from Animate.css.", "author": { "name": "Simon Asika", From 4d35eb1f77d83b7bc8f7c77c24e013235cc31759 Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Sat, 8 Oct 2016 23:32:42 +0800 Subject: [PATCH 12/20] Add bower --- bower.json | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 bower.json diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..690fb0a --- /dev/null +++ b/bower.json @@ -0,0 +1,27 @@ +{ + "name": "vue2-animate", + "description": "LESS cross-browser animation library, for use with Vue.js 2.0. Ported from Animate.css.", + "main": "", + "authors": [ + "Simon Asika" + ], + "license": "MIT", + "keywords": [ + "less", + "animate", + "animate.css", + "vue", + "vue.js", + "transition", + "vue-animate", + "css" + ], + "homepage": "https://github.com/asika32764/vue-animate", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] +} From 86b7732cd1284a7d088aa968c61357ead3359b8f Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Sat, 8 Oct 2016 23:39:50 +0800 Subject: [PATCH 13/20] Update version --- dist/vue-animate.css | 6 +++--- dist/vue-animate.min.css | 6 ------ 2 files changed, 3 insertions(+), 9 deletions(-) delete mode 100644 dist/vue-animate.min.css diff --git a/dist/vue-animate.css b/dist/vue-animate.css index 7745a6b..c32cb8a 100644 --- a/dist/vue-animate.css +++ b/dist/vue-animate.css @@ -1,9 +1,9 @@ @charset "UTF-8"; /*! - * vue-animate v0.0.4 - * (c) 2016 Hayden Bickerton + * vue2-animate v1.0.2 + * (c) 2016 Simon Asika * Released under the MIT License. - * Documentation: https://github.com/haydenbbickerton/vue-animate + * Documentation: https://github.com/asika32764/vue2-animate */ @keyframes bounceIn { from, diff --git a/dist/vue-animate.min.css b/dist/vue-animate.min.css deleted file mode 100644 index 8efe199..0000000 --- a/dist/vue-animate.min.css +++ /dev/null @@ -1,6 +0,0 @@ -@charset "UTF-8";/*! - * vue-animate v0.0.4 - * (c) 2016 Hayden Bickerton - * Released under the MIT License. - * Documentation: https://github.com/haydenbbickerton/vue-animate - */@keyframes bounceIn{from,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;transform:scale3d(0.3,0.3,0.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(0.9,0.9,0.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(0.97,0.97,0.97)}to{opacity:1;transform:scale3d(1,1,1)}}@keyframes bounceOut{20%{transform:scale3d(0.9,0.9,0.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(0.3,0.3,0.3)}}@keyframes bounceInDown{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}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}}@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)}}@keyframes bounceInLeft{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}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}}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes bounceInRight{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}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}}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}@keyframes bounceInUp{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}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)}}@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)}}.bounce-enter-active,.bounceIn{animation-name:bounceIn}.bounce-leave-active,.bounceOut{animation-name:bounceOut}.bounceUp-enter-active,.bounceInUp,.bounceUp-leave-active,.bounceOutUp{animation-duration:1s;animation-fill-mode:both}.bounceUp-enter-active,.bounceInUp{animation-name:bounceInUp}.bounceUp-leave-active,.bounceOutUp{animation-name:bounceOutUp}.bounceRight-enter-active,.bounceInRight,.bounceRight-leave-active,.bounceOutRight{animation-duration:1s;animation-fill-mode:both}.bounceRight-enter-active,.bounceInRight{animation-name:bounceInRight}.bounceRight-leave-active,.bounceOutRight{animation-name:bounceOutRight}.bounceLeft-enter-active,.bounceInLeft,.bounceLeft-leave-active,.bounceOutLeft{animation-duration:1s;animation-fill-mode:both}.bounceLeft-enter-active,.bounceInLeft{animation-name:bounceInLeft}.bounceLeft-leave-active,.bounceOutLeft{animation-name:bounceOutLeft}.bounceDown-enter-active,.bounceInDown,.bounceDown-leave-active,.bounceOutDown{animation-duration:1s;animation-fill-mode:both}.bounceDown-enter-active,.bounceInDown{animation-name:bounceInDown}.bounceDown-leave-active,.bounceOutDown{animation-name:bounceOutDown}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}@keyframes fadeOutDown{from{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}@keyframes fadeInDownBig{from{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:none}}@keyframes fadeOutDownBig{from{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutLeft{from{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}@keyframes fadeInLeftBig{from{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutLeftBig{from{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutRight{from{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}@keyframes fadeInRightBig{from{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutRightBig{from{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}@keyframes fadeOutUp{from{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}@keyframes fadeInUpBig{from{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:none}}@keyframes fadeOutUp{from{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}.fade-enter-active,.fadeIn{animation-name:fadeIn}.fade-leave-active,.fadeOut{animation-name:fadeOut}.fadeUpBig-enter-active,.fadeInUpBig,.fadeUpBig-leave-active,.fadeOutUpBig{animation-duration:1s;animation-fill-mode:both}.fadeUpBig-enter-active,.fadeInUpBig{animation-name:fadeInUpBig}.fadeUpBig-leave-active,.fadeOutUpBig{animation-name:fadeOutUpBig}.fadeUp-enter-active,.fadeInUp,.fadeUp-leave-active,.fadeOutUp{animation-duration:1s;animation-fill-mode:both}.fadeUp-enter-active,.fadeInUp{animation-name:fadeInUp}.fadeUp-leave-active,.fadeOutUp{animation-name:fadeOutUp}.fadeRightBig-enter-active,.fadeInRightBig,.fadeRightBig-leave-active,.fadeOutRightBig{animation-duration:1s;animation-fill-mode:both}.fadeRightBig-enter-active,.fadeInRightBig{animation-name:fadeInRightBig}.fadeRightBig-leave-active,.fadeOutRightBig{animation-name:fadeOutRightBig}.fadeRight-enter-active,.fadeInRight,.fadeRight-leave-active,.fadeOutRight{animation-duration:1s;animation-fill-mode:both}.fadeRight-enter-active,.fadeInRight{animation-name:fadeInRight}.fadeRight-leave-active,.fadeOutRight{animation-name:fadeOutRight}.fadeLeftBig-enter-active,.fadeInLeftBig,.fadeLeftBig-leave-active,.fadeOutLeftBig{animation-duration:1s;animation-fill-mode:both}.fadeLeftBig-enter-active,.fadeInLeftBig{animation-name:fadeInLeftBig}.fadeLeftBig-leave-active,.fadeOutLeftBig{animation-name:fadeOutLeftBig}.fadeLeft-enter-active,.fadeInLeft,.fadeLeft-leave-active,.fadeOutLeft{animation-duration:1s;animation-fill-mode:both}.fadeLeft-enter-active,.fadeInLeft{animation-name:fadeInLeft}.fadeLeft-leave-active,.fadeOutLeft{animation-name:fadeOutLeft}.fadeDownBig-enter-active,.fadeInDownBig,.fadeDownBig-leave-active,.fadeOutDownBig{animation-duration:1s;animation-fill-mode:both}.fadeDownBig-enter-active,.fadeInDownBig{animation-name:fadeInDownBig}.fadeDownBig-leave-active,.fadeOutDownBig{animation-name:fadeOutDownBig}.fadeDown-enter-active,.fadeInDown,.fadeDown-leave-active,.fadeOutDown{animation-duration:1s;animation-fill-mode:both}.fadeDown-enter-active,.fadeInDown{animation-name:fadeInDown}.fadeDown-leave-active,.fadeOutDown{animation-name:fadeOutDown}@keyframes rotateIn{from{transform-origin:center;transform:rotate3d(0,0,1,-200deg);opacity:0}to{transform-origin:center;transform:none;opacity:1}}@keyframes rotateOut{from{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateInDownLeft{from{transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}@keyframes rotateOutDownLeft{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0,0,1,45deg);opacity:0}}@keyframes rotateInDownRight{from{transform-origin:right bottom;transform:rotate3d(0,0,1,45deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}@keyframes rotateOutDownRight{from{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateInUpLeft{from{transform-origin:left bottom;transform:rotate3d(0,0,1,45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}@keyframes rotateOutUpLeft{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateInUpRight{from{transform-origin:right bottom;transform:rotate3d(0,0,1,-90deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}@keyframes rotateOutUpRight{from{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate3d(0,0,1,90deg);opacity:0}}.rotate-enter-active,.rotateIn{animation-name:rotateIn}.rotate-leave-active,.rotateOut{animation-name:rotateOut}.rotateUpRight-enter-active,.rotateInUpRight,.rotateUpRight-leave-active,.rotateOutUpRight{animation-duration:1s;animation-fill-mode:both}.rotateUpRight-enter-active,.rotateInUpRight{animation-name:rotateInUpRight}.rotateUpRight-leave-active,.rotateOutUpRight{animation-name:rotateOutUpRight}.rotateUpLeft-enter-active,.rotateInUpLeft,.rotateUpLeft-leave-active,.rotateOutUpLeft{animation-duration:1s;animation-fill-mode:both}.rotateUpLeft-enter-active,.rotateInUpLeft{animation-name:rotateInUpLeft}.rotateUpLeft-leave-active,.rotateOutUpLeft{animation-name:rotateOutUpLeft}.rotateDownRight-enter-active,.rotateInDownRight,.rotateDownRight-leave-active,.rotateOutDownRight{animation-duration:1s;animation-fill-mode:both}.rotateDownRight-enter-active,.rotateInDownRight{animation-name:rotateInDownRight}.rotateDownRight-leave-active,.rotateOutDownRight{animation-name:rotateOutDownRight}.rotateDownLeft-enter-active,.rotateInDownLeft,.rotateDownLeft-leave-active,.rotateOutDownLeft{animation-duration:1s;animation-fill-mode:both}.rotateDownLeft-enter-active,.rotateInDownLeft{animation-name:rotateInDownLeft}.rotateDownLeft-leave-active,.rotateOutDownLeft{animation-name:rotateOutDownLeft}@keyframes slideInDown{from{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutDown{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}@keyframes slideInLeft{from{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutLeft{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}@keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutRight{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}@keyframes slideInUp{from{transform:translate3d(0,100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutUp{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}.slide-enter-active,.slideIn{animation-name:slideIn}.slide-leave-active,.slideOut{animation-name:slideOut}.slideUp-enter-active,.slideInUp,.slideUp-leave-active,.slideOutUp{animation-duration:1s;animation-fill-mode:both}.slideUp-enter-active,.slideInUp{animation-name:slideInUp}.slideUp-leave-active,.slideOutUp{animation-name:slideOutUp}.slideRight-enter-active,.slideInRight,.slideRight-leave-active,.slideOutRight{animation-duration:1s;animation-fill-mode:both}.slideRight-enter-active,.slideInRight{animation-name:slideInRight}.slideRight-leave-active,.slideOutRight{animation-name:slideOutRight}.slideLeft-enter-active,.slideInLeft,.slideLeft-leave-active,.slideOutLeft{animation-duration:1s;animation-fill-mode:both}.slideLeft-enter-active,.slideInLeft{animation-name:slideInLeft}.slideLeft-leave-active,.slideOutLeft{animation-name:slideOutLeft}.slideDown-enter-active,.slideInDown,.slideDown-leave-active,.slideOutDown{animation-duration:1s;animation-fill-mode:both}.slideDown-enter-active,.slideInDown{animation-name:slideInDown}.slideDown-leave-active,.slideOutDown{animation-name:slideOutDown}@keyframes zoomIn{from{opacity:0;transform:scale3d(0.3,0.3,0.3)}50%{opacity:1}}@keyframes zoomOut{from{opacity:1}50%{opacity:0;transform:scale3d(0.3,0.3,0.3)}to{opacity:0}}@keyframes zoomInDown{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}to{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomInLeft{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(0.1) translate3d(-2000px,0,0);transform-origin:left center}}@keyframes zoomInRight{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(0.1) translate3d(2000px,0,0);transform-origin:right center}}@keyframes zoomInUp{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}to{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,-2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}.zoom-enter-active,.zoomIn{animation-name:zoomIn}.zoom-leave-active,.zoomOut{animation-name:zoomOut}.zoomUp-enter-active,.zoomInUp,.zoomUp-leave-active,.zoomOutUp{animation-duration:1s;animation-fill-mode:both}.zoomUp-enter-active,.zoomInUp{animation-name:zoomInUp}.zoomUp-leave-active,.zoomOutUp{animation-name:zoomOutUp}.zoomRight-enter-active,.zoomInRight,.zoomRight-leave-active,.zoomOutRight{animation-duration:1s;animation-fill-mode:both}.zoomRight-enter-active,.zoomInRight{animation-name:zoomInRight}.zoomRight-leave-active,.zoomOutRight{animation-name:zoomOutRight}.zoomLeft-enter-active,.zoomInLeft,.zoomLeft-leave-active,.zoomOutLeft{animation-duration:1s;animation-fill-mode:both}.zoomLeft-enter-active,.zoomInLeft{animation-name:zoomInLeft}.zoomLeft-leave-active,.zoomOutLeft{animation-name:zoomOutLeft}.zoomDown-enter-active,.zoomInDown,.zoomDown-leave-active,.zoomOutDown{animation-duration:1s;animation-fill-mode:both}.zoomDown-enter-active,.zoomInDown{animation-name:zoomInDown}.zoomDown-leave-active,.zoomOutDown{animation-name:zoomOutDown} \ No newline at end of file From 951b34728f2e06044eb3785b5407cad70fb28726 Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Sat, 8 Oct 2016 23:42:42 +0800 Subject: [PATCH 14/20] Update MISC --- README.md | 12 ++++++------ bower.json | 2 +- dist/{vue-animate.css => vue2-animate.css} | 0 dist/vue2-animate.min.css | 6 ++++++ package.json | 8 ++++---- src/{vue-animate.less => vue2-animate.less} | 0 6 files changed, 17 insertions(+), 11 deletions(-) rename dist/{vue-animate.css => vue2-animate.css} (100%) create mode 100644 dist/vue2-animate.min.css rename src/{vue-animate.less => vue2-animate.less} (100%) diff --git a/README.md b/README.md index 2846ebe..7805701 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# vue-animate for Vue 2.0 +# vue2-animate for Vue.js 2.0 *Cross-browser CSS3 animation library* @@ -15,7 +15,7 @@ Include the stylesheet: ```html - + ``` ####npm @@ -24,17 +24,17 @@ Include the stylesheet: npm install --save vue2-animate ``` ```js - require('vue-animate/dist/vue-animate.min.css') + require('vue2-animate/dist/vue2-animate.min.css') ``` ####Less ```less - @import "/src/vue-animate.less"; + @import "/src/vue2-animate.less"; ``` ####Building ```shell git clone https://github.com/asika32764/vue2-animate.git - cd vue-animate + cd vue2-animate npm install npm run build #Compiled .css files go to the dist folder ``` @@ -79,7 +79,7 @@ Animate.css's original classnames are supported on enter/leave transitions. So i ``` ####Supported Animations - Not all [Animate.css animations](https://github.com/daneden/animate.css#basic-usage "animations") are supported at the moment. Here is a list of what's in vue-animate (aka - *what you can put in the transition="x"* attribute) as of right now: + Not all [Animate.css animations](https://github.com/daneden/animate.css#basic-usage "animations") are supported at the moment. Here is a list of what's in vue2-animate (aka - *what you can put in the transition="x"* attribute) as of right now: #####Bounce * `bounce` diff --git a/bower.json b/bower.json index 690fb0a..f090437 100644 --- a/bower.json +++ b/bower.json @@ -16,7 +16,7 @@ "vue-animate", "css" ], - "homepage": "https://github.com/asika32764/vue-animate", + "homepage": "https://github.com/asika32764/vue2-animate", "ignore": [ "**/.*", "node_modules", diff --git a/dist/vue-animate.css b/dist/vue2-animate.css similarity index 100% rename from dist/vue-animate.css rename to dist/vue2-animate.css diff --git a/dist/vue2-animate.min.css b/dist/vue2-animate.min.css new file mode 100644 index 0000000..6879668 --- /dev/null +++ b/dist/vue2-animate.min.css @@ -0,0 +1,6 @@ +@charset "UTF-8";/*! + * vue2-animate v1.0.2 + * (c) 2016 Simon Asika + * Released under the MIT License. + * Documentation: https://github.com/asika32764/vue2-animate + */@keyframes bounceIn{from,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;transform:scale3d(0.3,0.3,0.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(0.9,0.9,0.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(0.97,0.97,0.97)}to{opacity:1;transform:scale3d(1,1,1)}}@keyframes bounceOut{20%{transform:scale3d(0.9,0.9,0.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(0.3,0.3,0.3)}}@keyframes bounceInDown{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}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}}@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)}}@keyframes bounceInLeft{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}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}}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes bounceInRight{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}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}}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}@keyframes bounceInUp{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}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)}}@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)}}.bounce-enter-active,.bounceIn{animation-name:bounceIn}.bounce-leave-active,.bounceOut{animation-name:bounceOut}.bounceUp-enter-active,.bounceInUp,.bounceUp-leave-active,.bounceOutUp{animation-duration:1s;animation-fill-mode:both}.bounceUp-enter-active,.bounceInUp{animation-name:bounceInUp}.bounceUp-leave-active,.bounceOutUp{animation-name:bounceOutUp}.bounceRight-enter-active,.bounceInRight,.bounceRight-leave-active,.bounceOutRight{animation-duration:1s;animation-fill-mode:both}.bounceRight-enter-active,.bounceInRight{animation-name:bounceInRight}.bounceRight-leave-active,.bounceOutRight{animation-name:bounceOutRight}.bounceLeft-enter-active,.bounceInLeft,.bounceLeft-leave-active,.bounceOutLeft{animation-duration:1s;animation-fill-mode:both}.bounceLeft-enter-active,.bounceInLeft{animation-name:bounceInLeft}.bounceLeft-leave-active,.bounceOutLeft{animation-name:bounceOutLeft}.bounceDown-enter-active,.bounceInDown,.bounceDown-leave-active,.bounceOutDown{animation-duration:1s;animation-fill-mode:both}.bounceDown-enter-active,.bounceInDown{animation-name:bounceInDown}.bounceDown-leave-active,.bounceOutDown{animation-name:bounceOutDown}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}@keyframes fadeOutDown{from{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}@keyframes fadeInDownBig{from{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:none}}@keyframes fadeOutDownBig{from{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutLeft{from{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}@keyframes fadeInLeftBig{from{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutLeftBig{from{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutRight{from{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}@keyframes fadeInRightBig{from{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutRightBig{from{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}@keyframes fadeOutUp{from{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}@keyframes fadeInUpBig{from{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:none}}@keyframes fadeOutUp{from{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}.fade-enter-active,.fadeIn{animation-name:fadeIn}.fade-leave-active,.fadeOut{animation-name:fadeOut}.fadeUpBig-enter-active,.fadeInUpBig,.fadeUpBig-leave-active,.fadeOutUpBig{animation-duration:1s;animation-fill-mode:both}.fadeUpBig-enter-active,.fadeInUpBig{animation-name:fadeInUpBig}.fadeUpBig-leave-active,.fadeOutUpBig{animation-name:fadeOutUpBig}.fadeUp-enter-active,.fadeInUp,.fadeUp-leave-active,.fadeOutUp{animation-duration:1s;animation-fill-mode:both}.fadeUp-enter-active,.fadeInUp{animation-name:fadeInUp}.fadeUp-leave-active,.fadeOutUp{animation-name:fadeOutUp}.fadeRightBig-enter-active,.fadeInRightBig,.fadeRightBig-leave-active,.fadeOutRightBig{animation-duration:1s;animation-fill-mode:both}.fadeRightBig-enter-active,.fadeInRightBig{animation-name:fadeInRightBig}.fadeRightBig-leave-active,.fadeOutRightBig{animation-name:fadeOutRightBig}.fadeRight-enter-active,.fadeInRight,.fadeRight-leave-active,.fadeOutRight{animation-duration:1s;animation-fill-mode:both}.fadeRight-enter-active,.fadeInRight{animation-name:fadeInRight}.fadeRight-leave-active,.fadeOutRight{animation-name:fadeOutRight}.fadeLeftBig-enter-active,.fadeInLeftBig,.fadeLeftBig-leave-active,.fadeOutLeftBig{animation-duration:1s;animation-fill-mode:both}.fadeLeftBig-enter-active,.fadeInLeftBig{animation-name:fadeInLeftBig}.fadeLeftBig-leave-active,.fadeOutLeftBig{animation-name:fadeOutLeftBig}.fadeLeft-enter-active,.fadeInLeft,.fadeLeft-leave-active,.fadeOutLeft{animation-duration:1s;animation-fill-mode:both}.fadeLeft-enter-active,.fadeInLeft{animation-name:fadeInLeft}.fadeLeft-leave-active,.fadeOutLeft{animation-name:fadeOutLeft}.fadeDownBig-enter-active,.fadeInDownBig,.fadeDownBig-leave-active,.fadeOutDownBig{animation-duration:1s;animation-fill-mode:both}.fadeDownBig-enter-active,.fadeInDownBig{animation-name:fadeInDownBig}.fadeDownBig-leave-active,.fadeOutDownBig{animation-name:fadeOutDownBig}.fadeDown-enter-active,.fadeInDown,.fadeDown-leave-active,.fadeOutDown{animation-duration:1s;animation-fill-mode:both}.fadeDown-enter-active,.fadeInDown{animation-name:fadeInDown}.fadeDown-leave-active,.fadeOutDown{animation-name:fadeOutDown}@keyframes rotateIn{from{transform-origin:center;transform:rotate3d(0,0,1,-200deg);opacity:0}to{transform-origin:center;transform:none;opacity:1}}@keyframes rotateOut{from{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateInDownLeft{from{transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}@keyframes rotateOutDownLeft{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0,0,1,45deg);opacity:0}}@keyframes rotateInDownRight{from{transform-origin:right bottom;transform:rotate3d(0,0,1,45deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}@keyframes rotateOutDownRight{from{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateInUpLeft{from{transform-origin:left bottom;transform:rotate3d(0,0,1,45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}@keyframes rotateOutUpLeft{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateInUpRight{from{transform-origin:right bottom;transform:rotate3d(0,0,1,-90deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}@keyframes rotateOutUpRight{from{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate3d(0,0,1,90deg);opacity:0}}.rotate-enter-active,.rotateIn{animation-name:rotateIn}.rotate-leave-active,.rotateOut{animation-name:rotateOut}.rotateUpRight-enter-active,.rotateInUpRight,.rotateUpRight-leave-active,.rotateOutUpRight{animation-duration:1s;animation-fill-mode:both}.rotateUpRight-enter-active,.rotateInUpRight{animation-name:rotateInUpRight}.rotateUpRight-leave-active,.rotateOutUpRight{animation-name:rotateOutUpRight}.rotateUpLeft-enter-active,.rotateInUpLeft,.rotateUpLeft-leave-active,.rotateOutUpLeft{animation-duration:1s;animation-fill-mode:both}.rotateUpLeft-enter-active,.rotateInUpLeft{animation-name:rotateInUpLeft}.rotateUpLeft-leave-active,.rotateOutUpLeft{animation-name:rotateOutUpLeft}.rotateDownRight-enter-active,.rotateInDownRight,.rotateDownRight-leave-active,.rotateOutDownRight{animation-duration:1s;animation-fill-mode:both}.rotateDownRight-enter-active,.rotateInDownRight{animation-name:rotateInDownRight}.rotateDownRight-leave-active,.rotateOutDownRight{animation-name:rotateOutDownRight}.rotateDownLeft-enter-active,.rotateInDownLeft,.rotateDownLeft-leave-active,.rotateOutDownLeft{animation-duration:1s;animation-fill-mode:both}.rotateDownLeft-enter-active,.rotateInDownLeft{animation-name:rotateInDownLeft}.rotateDownLeft-leave-active,.rotateOutDownLeft{animation-name:rotateOutDownLeft}@keyframes slideInDown{from{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutDown{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}@keyframes slideInLeft{from{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutLeft{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}@keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutRight{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}@keyframes slideInUp{from{transform:translate3d(0,100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutUp{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}.slide-enter-active,.slideIn{animation-name:slideIn}.slide-leave-active,.slideOut{animation-name:slideOut}.slideUp-enter-active,.slideInUp,.slideUp-leave-active,.slideOutUp{animation-duration:1s;animation-fill-mode:both}.slideUp-enter-active,.slideInUp{animation-name:slideInUp}.slideUp-leave-active,.slideOutUp{animation-name:slideOutUp}.slideRight-enter-active,.slideInRight,.slideRight-leave-active,.slideOutRight{animation-duration:1s;animation-fill-mode:both}.slideRight-enter-active,.slideInRight{animation-name:slideInRight}.slideRight-leave-active,.slideOutRight{animation-name:slideOutRight}.slideLeft-enter-active,.slideInLeft,.slideLeft-leave-active,.slideOutLeft{animation-duration:1s;animation-fill-mode:both}.slideLeft-enter-active,.slideInLeft{animation-name:slideInLeft}.slideLeft-leave-active,.slideOutLeft{animation-name:slideOutLeft}.slideDown-enter-active,.slideInDown,.slideDown-leave-active,.slideOutDown{animation-duration:1s;animation-fill-mode:both}.slideDown-enter-active,.slideInDown{animation-name:slideInDown}.slideDown-leave-active,.slideOutDown{animation-name:slideOutDown}@keyframes zoomIn{from{opacity:0;transform:scale3d(0.3,0.3,0.3)}50%{opacity:1}}@keyframes zoomOut{from{opacity:1}50%{opacity:0;transform:scale3d(0.3,0.3,0.3)}to{opacity:0}}@keyframes zoomInDown{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}to{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomInLeft{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(0.1) translate3d(-2000px,0,0);transform-origin:left center}}@keyframes zoomInRight{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(0.1) translate3d(2000px,0,0);transform-origin:right center}}@keyframes zoomInUp{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}to{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,-2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}.zoom-enter-active,.zoomIn{animation-name:zoomIn}.zoom-leave-active,.zoomOut{animation-name:zoomOut}.zoomUp-enter-active,.zoomInUp,.zoomUp-leave-active,.zoomOutUp{animation-duration:1s;animation-fill-mode:both}.zoomUp-enter-active,.zoomInUp{animation-name:zoomInUp}.zoomUp-leave-active,.zoomOutUp{animation-name:zoomOutUp}.zoomRight-enter-active,.zoomInRight,.zoomRight-leave-active,.zoomOutRight{animation-duration:1s;animation-fill-mode:both}.zoomRight-enter-active,.zoomInRight{animation-name:zoomInRight}.zoomRight-leave-active,.zoomOutRight{animation-name:zoomOutRight}.zoomLeft-enter-active,.zoomInLeft,.zoomLeft-leave-active,.zoomOutLeft{animation-duration:1s;animation-fill-mode:both}.zoomLeft-enter-active,.zoomInLeft{animation-name:zoomInLeft}.zoomLeft-leave-active,.zoomOutLeft{animation-name:zoomOutLeft}.zoomDown-enter-active,.zoomInDown,.zoomDown-leave-active,.zoomOutDown{animation-duration:1s;animation-fill-mode:both}.zoomDown-enter-active,.zoomInDown{animation-name:zoomInDown}.zoomDown-leave-active,.zoomOutDown{animation-name:zoomOutDown} \ No newline at end of file diff --git a/package.json b/package.json index c1ccbdc..4d610c2 100644 --- a/package.json +++ b/package.json @@ -26,8 +26,8 @@ "css" ], "files": [ - "dist/vue-animate.css", - "dist/vue-animate.min.css", + "dist/vue2-animate.css", + "dist/vue2-animate.min.css", "src" ], "devDependencies": { @@ -36,7 +36,7 @@ "less-plugin-clean-css": "^1.5.0" }, "scripts": { - "build": "lessc src/vue-animate.less > dist/vue-animate.css", - "minify": "lessc --clean-css='--compatibility=ie8 --advanced' src/vue-animate.less > dist/vue-animate.min.css" + "build": "lessc src/vue2-animate.less > dist/vue2-animate.css", + "minify": "lessc --clean-css='--compatibility=ie8 --advanced' src/vue2-animate.less > dist/vue2-animate.min.css" } } diff --git a/src/vue-animate.less b/src/vue2-animate.less similarity index 100% rename from src/vue-animate.less rename to src/vue2-animate.less From 05add3b0266fa9d825216a9e3a745c0db3bf1b91 Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Sat, 8 Oct 2016 23:50:00 +0800 Subject: [PATCH 15/20] Fix versions --- dist/vue2-animate.css | 2 +- dist/vue2-animate.min.css | 2 +- package.json | 2 +- src/vue2-animate.less | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/dist/vue2-animate.css b/dist/vue2-animate.css index c32cb8a..4522471 100644 --- a/dist/vue2-animate.css +++ b/dist/vue2-animate.css @@ -1,6 +1,6 @@ @charset "UTF-8"; /*! - * vue2-animate v1.0.2 + * vue2-animate v1.0.3 * (c) 2016 Simon Asika * Released under the MIT License. * Documentation: https://github.com/asika32764/vue2-animate diff --git a/dist/vue2-animate.min.css b/dist/vue2-animate.min.css index 6879668..a2d5e63 100644 --- a/dist/vue2-animate.min.css +++ b/dist/vue2-animate.min.css @@ -1,5 +1,5 @@ @charset "UTF-8";/*! - * vue2-animate v1.0.2 + * vue2-animate v1.0.3 * (c) 2016 Simon Asika * Released under the MIT License. * Documentation: https://github.com/asika32764/vue2-animate diff --git a/package.json b/package.json index 4d610c2..b055886 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue2-animate", - "version": "1.0.2", + "version": "1.0.3", "description": "LESS cross-browser animation library, for use with Vue.js 2.0. Ported from Animate.css.", "author": { "name": "Simon Asika", diff --git a/src/vue2-animate.less b/src/vue2-animate.less index 62c411c..6b855e8 100644 --- a/src/vue2-animate.less +++ b/src/vue2-animate.less @@ -1,7 +1,7 @@ @charset "UTF-8"; /*! - * vue2-animate v1.0.2 + * vue2-animate v1.0.3 * (c) 2016 Simon Asika * Released under the MIT License. * Documentation: https://github.com/asika32764/vue2-animate From b1748b15eb522b331d6c863f1907cdeda0791cae Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Mon, 10 Oct 2016 12:22:55 +0800 Subject: [PATCH 16/20] Fix base effect --- dist/vue2-animate.css | 37 ++++++++++++++++++++++++++++++++++++- dist/vue2-animate.min.css | 4 ++-- package.json | 5 +++-- src/make-transitions.less | 6 ++++++ src/vue2-animate.less | 2 +- 5 files changed, 48 insertions(+), 6 deletions(-) diff --git a/dist/vue2-animate.css b/dist/vue2-animate.css index 4522471..94a7d56 100644 --- a/dist/vue2-animate.css +++ b/dist/vue2-animate.css @@ -1,6 +1,6 @@ @charset "UTF-8"; /*! - * vue2-animate v1.0.3 + * vue2-animate v1.0.4 * (c) 2016 Simon Asika * Released under the MIT License. * Documentation: https://github.com/asika32764/vue2-animate @@ -203,6 +203,13 @@ } } .bounce-enter-active, +.bounceIn, +.bounce-leave-active, +.bounceOut { + animation-duration: 1s; + animation-fill-mode: both; +} +.bounce-enter-active, .bounceIn { animation-name: bounceIn; } @@ -439,6 +446,13 @@ } } .fade-enter-active, +.fadeIn, +.fade-leave-active, +.fadeOut { + animation-duration: 1s; + animation-fill-mode: both; +} +.fade-enter-active, .fadeIn { animation-name: fadeIn; } @@ -682,6 +696,13 @@ } } .rotate-enter-active, +.rotateIn, +.rotate-leave-active, +.rotateOut { + animation-duration: 1s; + animation-fill-mode: both; +} +.rotate-enter-active, .rotateIn { animation-name: rotateIn; } @@ -822,6 +843,13 @@ } } .slide-enter-active, +.slideIn, +.slide-leave-active, +.slideOut { + animation-duration: 1s; + animation-fill-mode: both; +} +.slide-enter-active, .slideIn { animation-name: slideIn; } @@ -1007,6 +1035,13 @@ } } .zoom-enter-active, +.zoomIn, +.zoom-leave-active, +.zoomOut { + animation-duration: 1s; + animation-fill-mode: both; +} +.zoom-enter-active, .zoomIn { animation-name: zoomIn; } diff --git a/dist/vue2-animate.min.css b/dist/vue2-animate.min.css index a2d5e63..05f0a9e 100644 --- a/dist/vue2-animate.min.css +++ b/dist/vue2-animate.min.css @@ -1,6 +1,6 @@ @charset "UTF-8";/*! - * vue2-animate v1.0.3 + * vue2-animate v1.0.4 * (c) 2016 Simon Asika * Released under the MIT License. * Documentation: https://github.com/asika32764/vue2-animate - */@keyframes bounceIn{from,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;transform:scale3d(0.3,0.3,0.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(0.9,0.9,0.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(0.97,0.97,0.97)}to{opacity:1;transform:scale3d(1,1,1)}}@keyframes bounceOut{20%{transform:scale3d(0.9,0.9,0.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(0.3,0.3,0.3)}}@keyframes bounceInDown{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}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}}@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)}}@keyframes bounceInLeft{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}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}}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes bounceInRight{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}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}}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}@keyframes bounceInUp{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}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)}}@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)}}.bounce-enter-active,.bounceIn{animation-name:bounceIn}.bounce-leave-active,.bounceOut{animation-name:bounceOut}.bounceUp-enter-active,.bounceInUp,.bounceUp-leave-active,.bounceOutUp{animation-duration:1s;animation-fill-mode:both}.bounceUp-enter-active,.bounceInUp{animation-name:bounceInUp}.bounceUp-leave-active,.bounceOutUp{animation-name:bounceOutUp}.bounceRight-enter-active,.bounceInRight,.bounceRight-leave-active,.bounceOutRight{animation-duration:1s;animation-fill-mode:both}.bounceRight-enter-active,.bounceInRight{animation-name:bounceInRight}.bounceRight-leave-active,.bounceOutRight{animation-name:bounceOutRight}.bounceLeft-enter-active,.bounceInLeft,.bounceLeft-leave-active,.bounceOutLeft{animation-duration:1s;animation-fill-mode:both}.bounceLeft-enter-active,.bounceInLeft{animation-name:bounceInLeft}.bounceLeft-leave-active,.bounceOutLeft{animation-name:bounceOutLeft}.bounceDown-enter-active,.bounceInDown,.bounceDown-leave-active,.bounceOutDown{animation-duration:1s;animation-fill-mode:both}.bounceDown-enter-active,.bounceInDown{animation-name:bounceInDown}.bounceDown-leave-active,.bounceOutDown{animation-name:bounceOutDown}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}@keyframes fadeOutDown{from{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}@keyframes fadeInDownBig{from{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:none}}@keyframes fadeOutDownBig{from{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutLeft{from{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}@keyframes fadeInLeftBig{from{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutLeftBig{from{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutRight{from{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}@keyframes fadeInRightBig{from{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutRightBig{from{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}@keyframes fadeOutUp{from{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}@keyframes fadeInUpBig{from{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:none}}@keyframes fadeOutUp{from{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}.fade-enter-active,.fadeIn{animation-name:fadeIn}.fade-leave-active,.fadeOut{animation-name:fadeOut}.fadeUpBig-enter-active,.fadeInUpBig,.fadeUpBig-leave-active,.fadeOutUpBig{animation-duration:1s;animation-fill-mode:both}.fadeUpBig-enter-active,.fadeInUpBig{animation-name:fadeInUpBig}.fadeUpBig-leave-active,.fadeOutUpBig{animation-name:fadeOutUpBig}.fadeUp-enter-active,.fadeInUp,.fadeUp-leave-active,.fadeOutUp{animation-duration:1s;animation-fill-mode:both}.fadeUp-enter-active,.fadeInUp{animation-name:fadeInUp}.fadeUp-leave-active,.fadeOutUp{animation-name:fadeOutUp}.fadeRightBig-enter-active,.fadeInRightBig,.fadeRightBig-leave-active,.fadeOutRightBig{animation-duration:1s;animation-fill-mode:both}.fadeRightBig-enter-active,.fadeInRightBig{animation-name:fadeInRightBig}.fadeRightBig-leave-active,.fadeOutRightBig{animation-name:fadeOutRightBig}.fadeRight-enter-active,.fadeInRight,.fadeRight-leave-active,.fadeOutRight{animation-duration:1s;animation-fill-mode:both}.fadeRight-enter-active,.fadeInRight{animation-name:fadeInRight}.fadeRight-leave-active,.fadeOutRight{animation-name:fadeOutRight}.fadeLeftBig-enter-active,.fadeInLeftBig,.fadeLeftBig-leave-active,.fadeOutLeftBig{animation-duration:1s;animation-fill-mode:both}.fadeLeftBig-enter-active,.fadeInLeftBig{animation-name:fadeInLeftBig}.fadeLeftBig-leave-active,.fadeOutLeftBig{animation-name:fadeOutLeftBig}.fadeLeft-enter-active,.fadeInLeft,.fadeLeft-leave-active,.fadeOutLeft{animation-duration:1s;animation-fill-mode:both}.fadeLeft-enter-active,.fadeInLeft{animation-name:fadeInLeft}.fadeLeft-leave-active,.fadeOutLeft{animation-name:fadeOutLeft}.fadeDownBig-enter-active,.fadeInDownBig,.fadeDownBig-leave-active,.fadeOutDownBig{animation-duration:1s;animation-fill-mode:both}.fadeDownBig-enter-active,.fadeInDownBig{animation-name:fadeInDownBig}.fadeDownBig-leave-active,.fadeOutDownBig{animation-name:fadeOutDownBig}.fadeDown-enter-active,.fadeInDown,.fadeDown-leave-active,.fadeOutDown{animation-duration:1s;animation-fill-mode:both}.fadeDown-enter-active,.fadeInDown{animation-name:fadeInDown}.fadeDown-leave-active,.fadeOutDown{animation-name:fadeOutDown}@keyframes rotateIn{from{transform-origin:center;transform:rotate3d(0,0,1,-200deg);opacity:0}to{transform-origin:center;transform:none;opacity:1}}@keyframes rotateOut{from{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateInDownLeft{from{transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}@keyframes rotateOutDownLeft{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0,0,1,45deg);opacity:0}}@keyframes rotateInDownRight{from{transform-origin:right bottom;transform:rotate3d(0,0,1,45deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}@keyframes rotateOutDownRight{from{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateInUpLeft{from{transform-origin:left bottom;transform:rotate3d(0,0,1,45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}@keyframes rotateOutUpLeft{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateInUpRight{from{transform-origin:right bottom;transform:rotate3d(0,0,1,-90deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}@keyframes rotateOutUpRight{from{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate3d(0,0,1,90deg);opacity:0}}.rotate-enter-active,.rotateIn{animation-name:rotateIn}.rotate-leave-active,.rotateOut{animation-name:rotateOut}.rotateUpRight-enter-active,.rotateInUpRight,.rotateUpRight-leave-active,.rotateOutUpRight{animation-duration:1s;animation-fill-mode:both}.rotateUpRight-enter-active,.rotateInUpRight{animation-name:rotateInUpRight}.rotateUpRight-leave-active,.rotateOutUpRight{animation-name:rotateOutUpRight}.rotateUpLeft-enter-active,.rotateInUpLeft,.rotateUpLeft-leave-active,.rotateOutUpLeft{animation-duration:1s;animation-fill-mode:both}.rotateUpLeft-enter-active,.rotateInUpLeft{animation-name:rotateInUpLeft}.rotateUpLeft-leave-active,.rotateOutUpLeft{animation-name:rotateOutUpLeft}.rotateDownRight-enter-active,.rotateInDownRight,.rotateDownRight-leave-active,.rotateOutDownRight{animation-duration:1s;animation-fill-mode:both}.rotateDownRight-enter-active,.rotateInDownRight{animation-name:rotateInDownRight}.rotateDownRight-leave-active,.rotateOutDownRight{animation-name:rotateOutDownRight}.rotateDownLeft-enter-active,.rotateInDownLeft,.rotateDownLeft-leave-active,.rotateOutDownLeft{animation-duration:1s;animation-fill-mode:both}.rotateDownLeft-enter-active,.rotateInDownLeft{animation-name:rotateInDownLeft}.rotateDownLeft-leave-active,.rotateOutDownLeft{animation-name:rotateOutDownLeft}@keyframes slideInDown{from{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutDown{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}@keyframes slideInLeft{from{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutLeft{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}@keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutRight{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}@keyframes slideInUp{from{transform:translate3d(0,100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutUp{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}.slide-enter-active,.slideIn{animation-name:slideIn}.slide-leave-active,.slideOut{animation-name:slideOut}.slideUp-enter-active,.slideInUp,.slideUp-leave-active,.slideOutUp{animation-duration:1s;animation-fill-mode:both}.slideUp-enter-active,.slideInUp{animation-name:slideInUp}.slideUp-leave-active,.slideOutUp{animation-name:slideOutUp}.slideRight-enter-active,.slideInRight,.slideRight-leave-active,.slideOutRight{animation-duration:1s;animation-fill-mode:both}.slideRight-enter-active,.slideInRight{animation-name:slideInRight}.slideRight-leave-active,.slideOutRight{animation-name:slideOutRight}.slideLeft-enter-active,.slideInLeft,.slideLeft-leave-active,.slideOutLeft{animation-duration:1s;animation-fill-mode:both}.slideLeft-enter-active,.slideInLeft{animation-name:slideInLeft}.slideLeft-leave-active,.slideOutLeft{animation-name:slideOutLeft}.slideDown-enter-active,.slideInDown,.slideDown-leave-active,.slideOutDown{animation-duration:1s;animation-fill-mode:both}.slideDown-enter-active,.slideInDown{animation-name:slideInDown}.slideDown-leave-active,.slideOutDown{animation-name:slideOutDown}@keyframes zoomIn{from{opacity:0;transform:scale3d(0.3,0.3,0.3)}50%{opacity:1}}@keyframes zoomOut{from{opacity:1}50%{opacity:0;transform:scale3d(0.3,0.3,0.3)}to{opacity:0}}@keyframes zoomInDown{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}to{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomInLeft{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(0.1) translate3d(-2000px,0,0);transform-origin:left center}}@keyframes zoomInRight{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(0.1) translate3d(2000px,0,0);transform-origin:right center}}@keyframes zoomInUp{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}to{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,-2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}.zoom-enter-active,.zoomIn{animation-name:zoomIn}.zoom-leave-active,.zoomOut{animation-name:zoomOut}.zoomUp-enter-active,.zoomInUp,.zoomUp-leave-active,.zoomOutUp{animation-duration:1s;animation-fill-mode:both}.zoomUp-enter-active,.zoomInUp{animation-name:zoomInUp}.zoomUp-leave-active,.zoomOutUp{animation-name:zoomOutUp}.zoomRight-enter-active,.zoomInRight,.zoomRight-leave-active,.zoomOutRight{animation-duration:1s;animation-fill-mode:both}.zoomRight-enter-active,.zoomInRight{animation-name:zoomInRight}.zoomRight-leave-active,.zoomOutRight{animation-name:zoomOutRight}.zoomLeft-enter-active,.zoomInLeft,.zoomLeft-leave-active,.zoomOutLeft{animation-duration:1s;animation-fill-mode:both}.zoomLeft-enter-active,.zoomInLeft{animation-name:zoomInLeft}.zoomLeft-leave-active,.zoomOutLeft{animation-name:zoomOutLeft}.zoomDown-enter-active,.zoomInDown,.zoomDown-leave-active,.zoomOutDown{animation-duration:1s;animation-fill-mode:both}.zoomDown-enter-active,.zoomInDown{animation-name:zoomInDown}.zoomDown-leave-active,.zoomOutDown{animation-name:zoomOutDown} \ No newline at end of file + */.bounce-enter-active,.bounce-leave-active,.bounceDown-enter-active,.bounceDown-leave-active,.bounceIn,.bounceInDown,.bounceInLeft,.bounceInRight,.bounceInUp,.bounceLeft-enter-active,.bounceLeft-leave-active,.bounceOut,.bounceOutDown,.bounceOutLeft,.bounceOutRight,.bounceOutUp,.bounceRight-enter-active,.bounceRight-leave-active,.bounceUp-enter-active,.bounceUp-leave-active,.fade-enter-active,.fade-leave-active,.fadeDown-enter-active,.fadeDown-leave-active,.fadeDownBig-enter-active,.fadeDownBig-leave-active,.fadeIn,.fadeInDown,.fadeInDownBig,.fadeInLeft,.fadeInLeftBig,.fadeInRight,.fadeInRightBig,.fadeInUp,.fadeInUpBig,.fadeLeft-enter-active,.fadeLeft-leave-active,.fadeLeftBig-enter-active,.fadeLeftBig-leave-active,.fadeOut,.fadeOutDown,.fadeOutDownBig,.fadeOutLeft,.fadeOutLeftBig,.fadeOutRight,.fadeOutRightBig,.fadeOutUp,.fadeOutUpBig,.fadeRight-enter-active,.fadeRight-leave-active,.fadeRightBig-enter-active,.fadeRightBig-leave-active,.fadeUp-enter-active,.fadeUp-leave-active,.fadeUpBig-enter-active,.fadeUpBig-leave-active,.rotateDownLeft-enter-active,.rotateDownLeft-leave-active,.rotateDownRight-enter-active,.rotateDownRight-leave-active,.rotateInDownLeft,.rotateInDownRight,.rotateInUpLeft,.rotateInUpRight,.rotateOutDownLeft,.rotateOutDownRight,.rotateOutUpLeft,.rotateOutUpRight,.rotateUpLeft-enter-active,.rotateUpLeft-leave-active,.rotateUpRight-enter-active,.rotateUpRight-leave-active,.slide-enter-active,.slide-leave-active,.slideDown-enter-active,.slideDown-leave-active,.slideIn,.slideInDown,.slideInLeft,.slideInRight,.slideInUp,.slideLeft-enter-active,.slideLeft-leave-active,.slideOut,.slideOutDown,.slideOutLeft,.slideOutRight,.slideOutUp,.slideRight-enter-active,.slideRight-leave-active,.slideUp-enter-active,.slideUp-leave-active,.zoom-enter-active,.zoom-leave-active,.zoomDown-enter-active,.zoomDown-leave-active,.zoomIn,.zoomInDown,.zoomInLeft,.zoomInRight,.zoomInUp,.zoomLeft-enter-active,.zoomLeft-leave-active,.zoomOut,.zoomOutDown,.zoomOutLeft,.zoomOutRight,.zoomOutUp,.zoomRight-enter-active,.zoomRight-leave-active,.zoomUp-enter-active,.zoomUp-leave-active{animation-duration:1s;animation-fill-mode:both}@keyframes bounceIn{20%,40%,60%,80%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}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)}}@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)}}@keyframes bounceInDown{60%,75%,90%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}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}}@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)}}@keyframes bounceInLeft{60%,75%,90%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}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}}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes bounceInRight{60%,75%,90%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}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}}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}@keyframes bounceInUp{60%,75%,90%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}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)}}@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)}}.bounce-enter-active,.bounceIn{animation-name:bounceIn}.bounce-leave-active,.bounceOut{animation-name:bounceOut}.bounceInUp,.bounceUp-enter-active{animation-name:bounceInUp}.bounceOutUp,.bounceUp-leave-active{animation-name:bounceOutUp}.bounceInRight,.bounceRight-enter-active{animation-name:bounceInRight}.bounceOutRight,.bounceRight-leave-active{animation-name:bounceOutRight}.bounceInLeft,.bounceLeft-enter-active{animation-name:bounceInLeft}.bounceLeft-leave-active,.bounceOutLeft{animation-name:bounceOutLeft}.bounceDown-enter-active,.bounceInDown{animation-name:bounceInDown}.bounceDown-leave-active,.bounceOutDown{animation-name:bounceOutDown}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}@keyframes fadeOutDown{from{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}@keyframes fadeInDownBig{from{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:none}}@keyframes fadeOutDownBig{from{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutLeft{from{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}@keyframes fadeInLeftBig{from{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutLeftBig{from{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutRight{from{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}@keyframes fadeInRightBig{from{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:none}}@keyframes fadeOutRightBig{from{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}@keyframes fadeInUpBig{from{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:none}}@keyframes fadeOutUp{from{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}.fade-enter-active,.fadeIn{animation-name:fadeIn}.fade-leave-active,.fadeOut{animation-name:fadeOut}.fadeInUpBig,.fadeUpBig-enter-active{animation-name:fadeInUpBig}.fadeOutUpBig,.fadeUpBig-leave-active{animation-name:fadeOutUpBig}.fadeInUp,.fadeUp-enter-active{animation-name:fadeInUp}.fadeOutUp,.fadeUp-leave-active{animation-name:fadeOutUp}.fadeInRightBig,.fadeRightBig-enter-active{animation-name:fadeInRightBig}.fadeOutRightBig,.fadeRightBig-leave-active{animation-name:fadeOutRightBig}.fadeInRight,.fadeRight-enter-active{animation-name:fadeInRight}.fadeOutRight,.fadeRight-leave-active{animation-name:fadeOutRight}.fadeInLeftBig,.fadeLeftBig-enter-active{animation-name:fadeInLeftBig}.fadeLeftBig-leave-active,.fadeOutLeftBig{animation-name:fadeOutLeftBig}.fadeInLeft,.fadeLeft-enter-active{animation-name:fadeInLeft}.fadeLeft-leave-active,.fadeOutLeft{animation-name:fadeOutLeft}.fadeDownBig-enter-active,.fadeInDownBig{animation-name:fadeInDownBig}.fadeDownBig-leave-active,.fadeOutDownBig{animation-name:fadeOutDownBig}.fadeDown-enter-active,.fadeInDown{animation-name:fadeInDown}.fadeDown-leave-active,.fadeOutDown{animation-name:fadeOutDown}@keyframes rotateIn{from{transform-origin:center;transform:rotate3d(0,0,1,-200deg);opacity:0}to{transform-origin:center;transform:none;opacity:1}}@keyframes rotateOut{from{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateInDownLeft{from{transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}@keyframes rotateOutDownLeft{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0,0,1,45deg);opacity:0}}@keyframes rotateInDownRight{from{transform-origin:right bottom;transform:rotate3d(0,0,1,45deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}@keyframes rotateOutDownRight{from{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateInUpLeft{from{transform-origin:left bottom;transform:rotate3d(0,0,1,45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}@keyframes rotateOutUpLeft{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateInUpRight{from{transform-origin:right bottom;transform:rotate3d(0,0,1,-90deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}@keyframes rotateOutUpRight{from{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate3d(0,0,1,90deg);opacity:0}}.rotate-enter-active,.rotate-leave-active,.rotateIn,.rotateOut{animation-duration:1s;animation-fill-mode:both}.rotate-enter-active,.rotateIn{animation-name:rotateIn}.rotate-leave-active,.rotateOut{animation-name:rotateOut}.rotateInUpRight,.rotateUpRight-enter-active{animation-name:rotateInUpRight}.rotateOutUpRight,.rotateUpRight-leave-active{animation-name:rotateOutUpRight}.rotateInUpLeft,.rotateUpLeft-enter-active{animation-name:rotateInUpLeft}.rotateOutUpLeft,.rotateUpLeft-leave-active{animation-name:rotateOutUpLeft}.rotateDownRight-enter-active,.rotateInDownRight{animation-name:rotateInDownRight}.rotateDownRight-leave-active,.rotateOutDownRight{animation-name:rotateOutDownRight}.rotateDownLeft-enter-active,.rotateInDownLeft{animation-name:rotateInDownLeft}.rotateDownLeft-leave-active,.rotateOutDownLeft{animation-name:rotateOutDownLeft}@keyframes slideInDown{from{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutDown{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}@keyframes slideInLeft{from{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutLeft{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}@keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutRight{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}@keyframes slideInUp{from{transform:translate3d(0,100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutUp{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}.slide-enter-active,.slideIn{animation-name:slideIn}.slide-leave-active,.slideOut{animation-name:slideOut}.slideInUp,.slideUp-enter-active{animation-name:slideInUp}.slideOutUp,.slideUp-leave-active{animation-name:slideOutUp}.slideInRight,.slideRight-enter-active{animation-name:slideInRight}.slideOutRight,.slideRight-leave-active{animation-name:slideOutRight}.slideInLeft,.slideLeft-enter-active{animation-name:slideInLeft}.slideLeft-leave-active,.slideOutLeft{animation-name:slideOutLeft}.slideDown-enter-active,.slideInDown{animation-name:slideInDown}.slideDown-leave-active,.slideOutDown{animation-name:slideOutDown}@keyframes zoomIn{from{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomOut{from{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomInDown{from{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{from{opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@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}}@keyframes zoomInRight{from{opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@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}}@keyframes zoomInUp{from{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoom-enter-active,.zoomIn{animation-name:zoomIn}.zoom-leave-active,.zoomOut{animation-name:zoomOut}.zoomInUp,.zoomUp-enter-active{animation-name:zoomInUp}.zoomOutUp,.zoomUp-leave-active{animation-name:zoomOutUp}.zoomInRight,.zoomRight-enter-active{animation-name:zoomInRight}.zoomOutRight,.zoomRight-leave-active{animation-name:zoomOutRight}.zoomInLeft,.zoomLeft-enter-active{animation-name:zoomInLeft}.zoomLeft-leave-active,.zoomOutLeft{animation-name:zoomOutLeft}.zoomDown-enter-active,.zoomInDown{animation-name:zoomInDown}.zoomDown-leave-active,.zoomOutDown{animation-name:zoomOutDown} \ No newline at end of file diff --git a/package.json b/package.json index b055886..9a1735e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue2-animate", - "version": "1.0.3", + "version": "1.0.4", "description": "LESS cross-browser animation library, for use with Vue.js 2.0. Ported from Animate.css.", "author": { "name": "Simon Asika", @@ -36,7 +36,8 @@ "less-plugin-clean-css": "^1.5.0" }, "scripts": { - "build": "lessc src/vue2-animate.less > dist/vue2-animate.css", + "build": "lessc src/vue2-animate.less > dist/vue2-animate.css && lessc --clean-css='--compatibility=ie8 --advanced' src/vue2-animate.less > dist/vue2-animate.min.css", + "less": "lessc src/vue2-animate.less > dist/vue2-animate.css", "minify": "lessc --clean-css='--compatibility=ie8 --advanced' src/vue2-animate.less > dist/vue2-animate.min.css" } } diff --git a/src/make-transitions.less b/src/make-transitions.less index 82db654..cb2c730 100644 --- a/src/make-transitions.less +++ b/src/make-transitions.less @@ -11,6 +11,12 @@ // animation-fill-mode: both; //} + .@{base}-enter-active, .@{base}In, + .@{base}-leave-active, .@{base}Out { + animation-duration: @animationDuration; + animation-fill-mode: both; + } + // Entrance/Exit for the base class .@{base}-enter-active, .@{base}In { animation-name: ~'@{base}In'; diff --git a/src/vue2-animate.less b/src/vue2-animate.less index 6b855e8..fe33946 100644 --- a/src/vue2-animate.less +++ b/src/vue2-animate.less @@ -1,7 +1,7 @@ @charset "UTF-8"; /*! - * vue2-animate v1.0.3 + * vue2-animate v1.0.4 * (c) 2016 Simon Asika * Released under the MIT License. * Documentation: https://github.com/asika32764/vue2-animate From a74439e74e20545cd1bc01898d129244f7a9db3b Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Mon, 10 Oct 2016 12:24:09 +0800 Subject: [PATCH 17/20] Prep 1.0.5 dev --- package.json | 2 +- src/vue2-animate.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 9a1735e..0f07748 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue2-animate", - "version": "1.0.4", + "version": "1.0.5", "description": "LESS cross-browser animation library, for use with Vue.js 2.0. Ported from Animate.css.", "author": { "name": "Simon Asika", diff --git a/src/vue2-animate.less b/src/vue2-animate.less index fe33946..6caf91a 100644 --- a/src/vue2-animate.less +++ b/src/vue2-animate.less @@ -1,7 +1,7 @@ @charset "UTF-8"; /*! - * vue2-animate v1.0.4 + * vue2-animate v1.0.5 * (c) 2016 Simon Asika * Released under the MIT License. * Documentation: https://github.com/asika32764/vue2-animate From ead89bbbe12557f02157838936c40cd165318f18 Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Tue, 25 Oct 2016 09:37:02 +0800 Subject: [PATCH 18/20] Add example --- example/images/logo.png | Bin 0 -> 11460 bytes example/index.html | 152 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 152 insertions(+) create mode 100644 example/images/logo.png create mode 100644 example/index.html diff --git a/example/images/logo.png b/example/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..8bbf984157a465f7280d556a754ebce1b5274c0c GIT binary patch literal 11460 zcmaKS1yqz<*YFSyC?TN2&_jySE!`bb(nt;sBb^c=2ug#L2qKM0Nh5-YFv!s8kcxDJ zNaugXd++=HU%a1dv3#EAoW0NPniHd=twM5z<_ZJ?AyHFR)Pq2960v`TQ1B(JO#}`8 zqxM!Z_SQ$*d;3{?A|P^hNE-xP&CS{Yp@*=x3-IVcNJ1cZEKUZ--o{#*;*YhT9+0K;VY(wubw=xw?Ca`%5wZ!7C1)v7dRF;eWPxyGSwrMU=6Y4qO50 ziGU092y@%=@e9F4#d!FI`GxNAbHN4p_yu|S1bO)dx%mae`NYKeh2ekyV+N;r+S!Zi zDJuVc7I>3lcJ%gsAkNF{=jX@cC&+{Jbl~L|6BFa*6W|pP;08Omy#n05t^K*(y;%Oi zpos9Y^>ljR?SyoPV=-FWAbq^0m;t4KvEcULUufOE{uUDu7_Yze173a}J}gWBY}C^F zzqh)%{cE?Ew;tl(^!~4iy$k{#Ab9lS*A1UfM zBE6Abj>rda1qC>VmbI;uJNEt79{?>aaW!`@Z)mDSIN_;D2})clyt?i2g@>f5Y1SXIk$3M_67!3@=u*|DUG+`2@@d`}i-r1uy@y ze1tnNcTZr~k)H!>Adp+4YKn3O{uApjgJLbdJ}*9anBH62QAx&tBkzAn!JnFTorpdm zdBxjwL@Fyu;7rA(z)?srRMVU%-Obe&pZW_7hF3HR`>gDSOLJ|6KaNdj4ytALDyp7_ zm5AoCO^-iEtS#+&Mqs1)fXQ0T6a1>JQqv{r{<)Kams;lc4zhnwx@`Tpe~=SoXz%KZ z#(_XIQ;DIt5D1JA0eZ_%bP<-TE=~%c1yU@9=kgtM%UJE!vc+ zg52z_E&=M!s$Zst=MFJK@_nkm>c^j7q9}t8341nPAjw|y8`Rn>6SzBjZ`v?e+t-;T zpUGVKZb%;`yj`|t3A*2NgBPg~4T+MW&Zu@YISEWH;Vr9nj-$Y#mC1Z3?)MRGxEEi3 zA>*ee5yLKWg=oMd(}t4ik!C>)GT^Ac--$z)(ZFn|@fsU$^3}{Y;tn5U13yoEftp^Z zWY3p)%cxM<%4+wu49C4AV-6eokaxP=^RZ1SMtmj6bK7L7F^uBtt!chD0uCS1QnS?E zANa@y*qyfW4;sCkY3Ed_CA$07HY<1U>8BF#2`%Dw1Q5@t|r7k`97FjdIR;511 z^~!cSNvF6AH&bV(dKJDY=o{Cf`Y8{@gzK5Gfn(Vjf!Vl`}88ud)IsI~c@1}#o1gWDP z3Ts1ZYd6E}@1!ret+vze<(=oIZ>`(a6TG4+HRK=1r@-bm?lLz*Oiwqe}1C?h#i93HM)l&3%&Oqo>Jl0%v>pcST?I1_HOZ zme+6CTTYuKpWJ+qBsqF8t;8vD&Y~Vn{Z+9}E+)*?axtS{nD1S8<=&hbhW&7MV_11` zO!=4Zmmkn#rsv7!2B_03H?$gE8pNq{{BDS#r|{dF`I+#@9ReqH&%fnFW}A6`<}7(k z3HzK&TFbra_#=!$`efPh!m{kLI=<^*g`?Lv(lbC9nO{hJ_f;J~imG1s z+?S5n@1Pz?SMzMcr7YaBIyIV5RoYJb#w~qXsKv-u)^?Hq>rgo9Ua7ZVenZl&0Hfv@ zA&Kar^Pi{7ThLssR?^qu&T@(d#RA1eaDBqfeV3qzB%Qw-YYzsel+UA_cqWz0=sR`% zw%Tr0Zf2xUtlRo@$CcqEkyS^vbvD?|CZ?bL_0i6diABzhy1xGYOT_(B28T{ zs8?2(&2Q-xi4Zp%%2+(3DvJq^PFc|poS>$fs}M}_V3Q`MQ=!o-y?^Mf$6M*?HdRNP z{Sak7B!*`{ah63-g7=HP2IIhNMIB9KX8ucJgq%4nDZhA;%k*1_(Qt)}uEU9GtB7)= zxVVaUMOdcgab2^>nqk~sZ5g5!M6By|%DxAgxX4g~&C#oSZ@GVrXJ)jd?wUr)thPK$ zdK=$Q0!;YneWSU7H!jVlG4CF(J8$=dINwC=zUQ+76e7eezCPUl+EDYiNy442Yg?-B z5i{ziFGCjCkuIA<1Yew)((&T`a$M+`i_MGccqB3cWW-Ud1S__=aSC3NOa!j_sQNj;*^TgCy8Ek$0Y~8%H`rT zznj*InIF?zcr}ckzUo^zVAa1g98SafO)kBx0g%Euc}J{Q`fdvY`{8Lf`i zcjYG5u-kZhqNPdF6r{vsm*6cytv?615a_wVGrN*6M|@F#(Xq2rDD%v9pJ}OR38i{Z z#n!@>0lmKK;(mrHg5Dp!;)ECbHcov-+t)6fn0_?~{&WGkmmRe*1Su4dCx z8&=r`PWyI38_*s_6Me@v*PD~tVUDLh)r*_xP*zH(c!XuV`fk4dx#57)Kul6;eAhng zN6?i|>TO-@BeIeMszDLe^+~xB;|q)1+NxHRo+SszJM{E2?)w2KvD26wA{M=uQ|oHa z$Do3hCv|msLQ}HAx0G7nrUy}Tw~T9c)lG@KShBm6w}8Bw8(1@5%(S$v@nsa6IP^l% zUcX4Bvt~xR&8^|5i?jZ)bJL(`;bd1M?b75C+m|2l5lMHo`%G(HR|a1A1WVQD;IZh^ z$1O}<3N{hJpS06@_=cLmeetBmrC^V5UxXu6qMvw1XKQumf!E1)yo8N2SbAE3>+mVaiC%&P4mvqzd(Bm%YxjFzcDE2-> zt8+zUUaVk-y{V&@be&FOaBL|(=Y-NaVH&ON5O8DZE*5_ut&(xi4dw%(gk&3No z=rx41!Yh|0OX1)6SqI!zS;E(Mr*A*hGeppiMi{+RM?VUXnO`+767hvH zYaf5`ei2PXn<=JbbjssbgU|0dyE|I_A+Py!=KFoi6@DFYt55j|=cVm&3&Qh>%1juF z@zuc^Ba4XZb)=KmI3)ufd85zT=1FDpEp(~EKEKNSleYW^?T<#}Gba-1e!CzHl6xHC z@y8M>M`jXl#f-AMCvoLsb7=bG7%I;QR*$oeCphS;hK68nN=0Pl&+B$rp`P|RiS-Gv z>ZCUJvfjQK+EzK@hocQu@5|=uvk;6srpH+vX7q7dak_l(1}c+=dN}gE1!l{SM_>8Q zc8X`2#yXIS;{(G=$Sxa?SW=EBb;V#Fuciu#yqlV)d&CwJ*C|_;fqFA6rBM#^3!rLf z>|hHPuPx9#b-Lr1TnOU4c>PyOH1iY+rTca@Ks52@1C8aLq7+0-tLVU0inOLg_Ej1td1hpK@}i z>g~r1uboL8z0lZ2>hf8IC&5OI@dc+txMLR&mG?S3J%ruNaxfnHboqbe=o0`il7!Rf}GVX__$(u0e>#&=iG zESPIRo_{N6VEFBW>a`=4?UGubyeqej=*Kfd>RfI0G2jQ4?0+Sa<{+RYEgf@k!pS5&20 zzX>h2qt)6Ll|mzEo}^sADZR?P3#lH{S}p~}UDDOj2-wD()V8z9cjx9IMQss!e;PCj zFRMj{wnb~Wup;B9GwEssOXUKx_&4DOs6W=vc;n1Yu1()X>jhAG3gso(rHYZDL?oVBTigE%Ko|# zY026Z%iwA9=D#&&yU*4Y&dn}J5V$o{MC?X3#OU|Sn8vY0YT9R*v*>4jeil5_ZR&Ha zj(GXqP>YMo^U6~KQv=~iFZG8<&x#GdKcki&`#p||841o~vf`XL&gJnOAAhgqtoSbe z&1c#DZr8E7NWxRv6%h(#7f$-+`=DFXiO~53+n_y;6hX7V;%=c?uG7xhGgJ$a-A%8} z@63+FT|jm_Fi$^}`5Hxm^DH{8v^8>zCUU04a%48czw4^U>Og^+*3_TI>?rsZL+5ho z&vKDeLX@;n8hbU<<&Vy7Mb>bVc{L{_d60-FM%&{kQ!<85zALFSv5O)jV5Ac93oSht zIQyY?j$(E|e8+VD2^YS+JtK_*@C=2Z(J!M#YnY+V4=2#5|vUUrK1Lf+-`3 ziH>A7f6RN-nB6F(hiXnUJCddEdeU_T1nO$@Z{;||tfuTW`pr_EMf_wHS?fDXJ9I3B zC_^@7A;WewLz^L+?X>FHOsxhjld{`&WbrAtL7rYwTC)HX?3asyr$~-kGt6VZfqntG z@$rHC(2dGh$#mI>2oI$fy&)+AbxdQk7!G3Aj`HWekBo(RD2OIGLWwNzO0%**1rmy= zQ1fHkcumou7yT*p_Vje;o4-1khFdee1~xWW8Xq)RzTiuQZG(;_+JyFqwy4RK7I`ns zl9iQGh`k*h6r!bm-<9>(>&}%Yg=XqgG(8A&C-R29M+4H7xL{!VW9P(Y)u|p7y22|pg95OcU3@+qpN;va*OYS{`jd}8;X#6xx$17tRRyQYpM*OrV}9z$kC94sowc zB+aSWc$_+zYg&AEs%ckeoTspes$F&f55^l(^LT^k#fs?UmdsPhZqpRIQU~Yhcvg)84YPSotQloLIZAph5F{-wq~zHt{ID zpj|O1ee;IRcje75hUqd1HAOK!w-H=kMgloZ{^OOmR(j3#C71s$$jh+>xfU+9Oq!Jv zCNaMDey}r%qA&55dPC-+XobWQrNzqa&9Rs>W!WyBZVI&PzRP83vV5)QPmjegP-xd2 zrut7Qxr*Wl_=-naEjDTd?2Q=EMz7P=YX34_3{UD2!^j^^j_Fai^teLgtG-n-!Bn4) z-`=3Nt4eCKF6(`%a5UMNXPed%a$A0ENZ3|mLP@nX{7^4NBjc(_R}Hn%?ccTE8+EA# zpGHPn$CT5Twq1TgJnwaFoMl=&l@B_^26|oQobNPL-sRrtcC>bzJ>Nmn43VKKtt^!G z`Ec>NV}3$fDfjO?S!BeAb+~+qya*<2;j2D|LUS~xx!A)MN8|2yaR{bN`YKd?th^Bx z9vrtfOv)4y*YRkDXCzA{x+Lp;tdKO=Vmv!zMD5O__(tb9ZFt3m7b{u^u-vFGKRlIvk4oY0`%>=bY2f|+MqPYhH^3CXU z$-OzlSaE#QqJ35YEBM~bWv7$GkILuGr97e$NJR|MS3_Z_;K?Z+0dWD3397_a^zky_FoL%X2(Ovy?`Sk9ixuW_5hlw=k@|Bq(t@ z1=}u*nfGaUqKxJl%=>N;1kA|7zK<<{Q#~$Hn`JJ=wiI>9O+z|g{``> z0i3lY{4FhYtO@GWiAN$+iFX&DlH{HS-^j)ipqQjjUTDK2oI<3w*4YWCVK1s*T2TQY zwu#K`4GR~dJL5YO2CnjVDP_i4_R^Wq{{FS!W8uUw)ps>yUw%Xts2-Woe$eC|ORPp< zk-aq#=OUUNea|_KB3PYMs?+OhM@xnD<3cH@cRjWwaVJ#o z_x{jcBA=HlQ7*fYF(h^j1FY!w%16;DIm(yE{wZnTH{v{}e8?V=${69`#bn1gu9$tX zGL@RIF*IsSoYWi0DzxBhdQF}YFf^bG4(=6jT7M9GeK%8Eae>;wISB;B8G2k|R!S2T zvS2crqAM)h!n^RztO1TkvG7$7q||TyhKq3i^vcT(4~SN+N50l>(KD6r zPcbp_J3Mf~lt{CWj4NGCGz=I*vZh_JcaTm8ti(vm_sA>df{vqAxz!NNPX~nCWhqoz zYRT=Ybl*$;TtEs+Zrx^O35mynCZo9K-9Xb6RF#7rmL{9U+^yt3(E`S2^(@ymESxp1 zZde;0;gMu9mWJAC2-FI6vr=BVj&SBr>~vttRreEBhh--F6~0J55V^aMRRlzY?|0I4 z38p$5U_KE91RMHEDBVq?-%KiyJ5bANQA(y5f~TfLDZn+Ym&%vi+c^Ase(IZ96D2q@ zZ+hTXyR4oqwrC(?1C{OytI?t1X|CQI%qtA8y>E|s;3c4Kq1OvYf~1d8-*>WNe)U@n zyaZ93e|d?_3SNqqCsjS*Q-@K_WL`4Lru{J)xHq*&gDn?G0k5W;DZU^k%`Y`HX%fHL zTM?sL^a5iI(vv1Um}=R(LK|i3B(g|@WNvdOrRK`W{X|hZvwy8lpPK940{cF;eeT& zIl#*vZO9`TPb_k!;mfRr^Y=OV-LXJYPzdA)-h|>Vaw)D!Rw@Ap^r|R~SwM1j=b(RA zfHGhJr(L!kW$3hpO_L=07Ms~!>1|(aSF1n9cAZiJ>B7w^Ul)p}zj_>3?b`MHOI+Jq zqlD6KsGtVxep3uSUN}t#iebeU1UVFM=KK{Z;mwtXKrSivjPVs)20pS9a?S!0fZ8UY z$SaN`^bNwfSCD+FKPM@0gfZ(%=g{)&4luklkH?AOUa5<2_uzhQ- z0*LZeR?WS&-?pryjwb?%`SPnD$^bvq$^9>xfAt`|`NO_(47PL_?!E)oZ{{TJLj}OF z`{lalJC_Tbh7Uy_L^1+Cb&G(-Zjkr`K;lo`t+ivyjCE;x=XxtUHc?L6ZGNf7JQg573P9En67CCr>HB zF)fhF2ONuP0=f3~lpBPd!JmKDl4IV(r!_dNvmxmX&8J7#+Rh9wlrJdJ?^&x)n1MLR z!e3_BTHEp2Q#ABtjcKBe+i*BP#S7HI2o>3h0xX-gIILL&9c+N!vGW~}YF&5uiNNCH zpaN`;Hw_e-q&S69oY8{-Fq@HZ52#(<1f}-RAcyL--eAGcG~oL^!f(gMmx%G1yRHrI zgUamGN8iG|YrIXjLT2O#j^IgfEG`t694)V0=%R9Y%@rhJum0n?F9X;Sxi4dWShy_s zZS&rW@2kfi^5#>sSJH#edc%*A$AWzCK6SGLK0IpeQMW*Z9Ca{TxPXr&UhsgzfG^u~ zwECkgT*L(RWLPR1YcE$Sy!*CtQwlHMUO?>`cKI*E2sU2b<6>)QC+;alW*XJvY&k{RbAG*deTdCRq+T=N#sfnc+#0MF@ zk%Ss03;&>VPMMY5c{GMcj6eHy9kSPJW~PfvgEnLg0&Jk0G-whM!jwIRyXmapiD6vx zC385wgLgK6@e{xZSs!;7{33KK5#2g52H+H_k;Gz84`t6*wyUAH!Y2LoyJn{?OmPpo zIdFVtl=u^5l%N7+s@tTxG!lv>!gh@S1N}JDX1Y6zx@_F|vMmuGnd%*j;YJOp^JiT~ zeQ^GjnncjN$5H687@lO{665Q2qzr#ogcA0=kWPa~KAhCaeC9grtgYhYlrdQ^T;jRzwv$R-&k zWyXt5iIBF3;NjFH*5M6vt6YZN?0txq{qmEC>+sR%mX>qfW*Pa*B^?a>30o|9iQ(-= zPU#|#h#ycY2giZ}b{k>ma8&PYri0txLCMGhE*@l)b1MbnQqOQ^KS(VFri5FQc(<^H zmTiV}YQq)}M9wlvo((BG$Uu-ZJA{vn5G@}?&zRP+<#fQ06Bgdys5yUQ#WzoJb$r1V z2kgFF4O&-$f;2fsJb+yD4v`pq`V&WzDZ@TLxDgQ+b5cOB95w1OmLLVLH!N}$s5IZ> zND?q zG^Kpa*uf(gGgjT1Ko8i~5>ApD-cXDgs~Sn52JcB$k+nE>(UN!}?PR(;*M5aZ0EqHOZa( zfi;V&AMnyxmXKfeP98{EpW`lo2#`e!h2%{{Q6yQ@E`rR~86!L#n3%V+dsqztXn-@5 zuWTyC6nRxL5`pw(^BLO;DU6J5b%QHv;bRDNzJgB)II;EKyhPaeLJ=^8ZNWZbg@^80ZwCP7@WEj^ET;zo8kdC z&ET3Z$Uk*sF@Hq({c8W8x`%@~2&hff$(oid2ey<3HZV+33H8-LEub~kOIKCbl%oc{gSfG8T9mJmE#O^55= z1P-9sc{90dPPA)4trDv^;G*&343InIo4>NaDx|}9*dITDZ!736&?6)l8)e{ePe?0o z$d3FJxgUKUNURk;ouE4#`<`R*S1}4=2ZuO}TWi=pIrBjc0;evCTCY0LXdq|%(4|~S z0#4A0;}aLY5|mCAg&3n80L3UmG5T(Z-&gxfMFoBf>OlIB%IfTe%5k!e}|b{ z3j$oJ>vKM@aZs`l_Atvk4aLTfHZlkRjBl-hOX!u#mLIxBlmMlU35sduTk-ZV=EMc~ zAQ(l+O?rMdvf`;k3oJ9Qge=1|M8;8Wkg=_U$>YYMQpZ2EYd)*8-H9EiN~vTAZ6=1p%$m zoUn==2pzP&h>p-*s?h^zGsCeaov_T9|}}M-p-4<`+3G77aM7C zq8Y#d3;B4U67%`@ZyKzD=0+~R)LLT>e!6xlhUJ=kp4>_I)crF~s5@44itiFfhJBQ` zN5#*Ya9E+69gh@i{QWR8ss|C#+5NpX3^H~Gz~ z{yzC#g>^QqJG&I2u7FH<7kiCL^Gg!RdF@b5>^n|*qR3#_9PyzoR`8dB-z2&#;E~pS z1b&Z)qe^z5Az{#sk(o~b@g2g-MYNLQj-bCm2$-;0#svUtoyBzJ2q>=?|=X%xot4y3)1zp)YtKAfrN_ zgLp%0c{Evf?gs?P3ORgqvtZ-R&hLlkejvu-9O_XD+_ngMZs~N;hRt5>80_f7H~XiG z#OVNb!yQgj!TC|f(+mBI4?c=mHXhqy=NmJOry~*PKd@T}=W(2-KS+hqK`fuBWJ0nd zK~4^t6-=ft!AkRgxzh*8{GV3^!QubyHsSw$ArSb$zi%M^PhhqAi_3fv?V?LpUOc=u Q0;qtfDQPQK$Xh-7e+`t7*Z=?k literal 0 HcmV?d00001 diff --git a/example/index.html b/example/index.html new file mode 100644 index 0000000..9d17721 --- /dev/null +++ b/example/index.html @@ -0,0 +1,152 @@ + + + + + Vue2-animate - For Vue.js transitions + + + + + + + + + +
    +
    +

    Vue2-animate

    +

    + A Vue.js 2.0 port of Animate.css. For use with Vue's built-in transitions +

    +

    + + Star + + Download +

    +

    Install »

    +
    +
    + +
    +
    +
    +

    Select an effect to DEMO

    +
    + +
    + +
    + 
    <transition-group name="{{ effect }}" tag="ul" class="list-group">
+    <li v-for="(item, i) in items" class="list-group-item" v-bind:key="i">{{ item }}</li>
+</transition-group>
    +
    +
    +
    +
    +
    + + + + + +
    +
    + +
    + +
  • {{ item }}
    • +     +
    +
    + +
    +
    + + + + + + + \ No newline at end of file From 55ce19666033145e0bd3527bda9db45380b7eb9a Mon Sep 17 00:00:00 2001 From: Simon Asika Date: Tue, 25 Oct 2016 10:11:08 +0800 Subject: [PATCH 19/20] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7805701..d3992a4 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ [![Version](https://img.shields.io/npm/v/vue2-animate.svg?style=flat-square)](https://www.npmjs.com/package/vue2-animate) [![License](https://img.shields.io/npm/l/vue2-animate.svg?style=flat-square)](LICENSE) -A [Vue.js](http://vuejs.org/ "Vue.js") port of [Animate.css](https://github.com/daneden/animate.css "Animate.css"). For use with Vue's built-in transitions. +A [Vue.js](http://vuejs.org/ "Vue.js") port of [Animate.css](https://github.com/daneden/animate.css "Animate.css"). For use with Vue's built-in transitions. | [DEMO](http://about.asika.tw/vue2-animate/) **This is modified version of: https://github.com/haydenbbickerton/vue-animate for Vue 2.0** From fef0ed266b47ff73e3d703c73b8614a9ce48f720 Mon Sep 17 00:00:00 2001 From: Richard van Zon Date: Fri, 31 Mar 2017 11:17:13 +0200 Subject: [PATCH 20/20] Update README.md fixed headings --- README.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index d3992a4..5ec14b2 100644 --- a/README.md +++ b/README.md @@ -9,8 +9,8 @@ A [Vue.js](http://vuejs.org/ "Vue.js") port of [Animate.css](https://github.com/ **This is modified version of: https://github.com/haydenbbickerton/vue-animate for Vue 2.0** -##Installation -####HTML +## Installation +#### HTML Include the stylesheet: ```html @@ -18,7 +18,7 @@ Include the stylesheet: ``` -####npm +#### npm If you're on webpack and using the [css-loader](https://github.com/webpack/css-loader "css loader"), you can use something like this: ```shell npm install --save vue2-animate @@ -26,12 +26,12 @@ Include the stylesheet: ```js require('vue2-animate/dist/vue2-animate.min.css') ``` -####Less +#### Less ```less @import "/src/vue2-animate.less"; ``` -####Building +#### Building ```shell git clone https://github.com/asika32764/vue2-animate.git cd vue2-animate @@ -39,7 +39,7 @@ Include the stylesheet: npm run build #Compiled .css files go to the dist folder ``` -##Usage +## Usage Use [Vue.js transitions](http://vuejs.org/guide/transitions.html "Vue.js Transitions") as you normally would, but for the transition name you will use one of [Animate.css animations](https://github.com/daneden/animate.css#basic-usage "animations") **removing** the ***In/Out*** from the name. @@ -53,7 +53,7 @@ Include the stylesheet: ``` enter/leave is already written in the stylesheet, so just remove *In/Out* from the name and you're golden. -####Custom Transition Classes +#### Custom Transition Classes Animate.css's original classnames are supported on enter/leave transitions. So if you're going to use [Custom Transition Classes](http://vuejs.org/guide/transitions.html#Custom-Transition-Classes "Custom Transition Classes"), you can either add *-enter/-leave* to the classes: @@ -78,17 +78,17 @@ Animate.css's original classnames are supported on enter/leave transitions. So i ``` -####Supported Animations +#### Supported Animations Not all [Animate.css animations](https://github.com/daneden/animate.css#basic-usage "animations") are supported at the moment. Here is a list of what's in vue2-animate (aka - *what you can put in the transition="x"* attribute) as of right now: -#####Bounce +##### Bounce * `bounce` * `bounceDown` * `bounceLeft` * `bounceRight` * `bounceUp` -#####Fade +##### Fade * `fade` * `fadeDown` * `fadeDownBig` @@ -99,20 +99,20 @@ Animate.css's original classnames are supported on enter/leave transitions. So i * `fadeUp` * `fadeUpBig` -#####Rotate +##### Rotate * `rotate` * `rotateDownLeft` * `rotateDownRight` * `rotateUpLeft` * `rotateUpRight` -#####Slide +##### Slide * `slideDown` * `slideLeft` * `slideRight` * `slideUp` -#####Zoom +##### Zoom * `zoom` * `zoomDown` * `zoomLeft`