添加其他动画
parent
6d0f668f88
commit
e51ee8c1ad
|
@ -1,3 +1,321 @@
|
||||||
|
// https://daneden.github.io/animate.css/
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
from,
|
||||||
|
20%,
|
||||||
|
53%,
|
||||||
|
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);
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
40%,
|
||||||
|
43% {
|
||||||
|
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||||
|
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||||
|
-webkit-transform: translate3d(0, -30px, 0);
|
||||||
|
transform: translate3d(0, -30px, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||||
|
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||||
|
-webkit-transform: translate3d(0, -15px, 0);
|
||||||
|
transform: translate3d(0, -15px, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
90% {
|
||||||
|
-webkit-transform: translate3d(0, -4px, 0);
|
||||||
|
transform: translate3d(0, -4px, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes flash {
|
||||||
|
from,
|
||||||
|
50%,
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
25%,
|
||||||
|
75% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
||||||
|
@keyframes pulse {
|
||||||
|
from {
|
||||||
|
-webkit-transform: scale3d(1, 1, 1);
|
||||||
|
transform: scale3d(1, 1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
-webkit-transform: scale3d(1.05, 1.05, 1.05);
|
||||||
|
transform: scale3d(1.05, 1.05, 1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
-webkit-transform: scale3d(1, 1, 1);
|
||||||
|
transform: scale3d(1, 1, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes rubberBand {
|
||||||
|
from {
|
||||||
|
-webkit-transform: scale3d(1, 1, 1);
|
||||||
|
transform: scale3d(1, 1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
-webkit-transform: scale3d(1.25, 0.75, 1);
|
||||||
|
transform: scale3d(1.25, 0.75, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
-webkit-transform: scale3d(0.75, 1.25, 1);
|
||||||
|
transform: scale3d(0.75, 1.25, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
-webkit-transform: scale3d(1.15, 0.85, 1);
|
||||||
|
transform: scale3d(1.15, 0.85, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
65% {
|
||||||
|
-webkit-transform: scale3d(0.95, 1.05, 1);
|
||||||
|
transform: scale3d(0.95, 1.05, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
-webkit-transform: scale3d(1.05, 0.95, 1);
|
||||||
|
transform: scale3d(1.05, 0.95, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
-webkit-transform: scale3d(1, 1, 1);
|
||||||
|
transform: scale3d(1, 1, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes shake {
|
||||||
|
from,
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
10%,
|
||||||
|
30%,
|
||||||
|
50%,
|
||||||
|
70%,
|
||||||
|
90% {
|
||||||
|
-webkit-transform: translate3d(-10px, 0, 0);
|
||||||
|
transform: translate3d(-10px, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
20%,
|
||||||
|
40%,
|
||||||
|
60%,
|
||||||
|
80% {
|
||||||
|
-webkit-transform: translate3d(10px, 0, 0);
|
||||||
|
transform: translate3d(10px, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes headShake {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translateX(0);
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
6.5% {
|
||||||
|
-webkit-transform: translateX(-6px) rotateY(-9deg);
|
||||||
|
transform: translateX(-6px) rotateY(-9deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
18.5% {
|
||||||
|
-webkit-transform: translateX(5px) rotateY(7deg);
|
||||||
|
transform: translateX(5px) rotateY(7deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
31.5% {
|
||||||
|
-webkit-transform: translateX(-3px) rotateY(-5deg);
|
||||||
|
transform: translateX(-3px) rotateY(-5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
43.5% {
|
||||||
|
-webkit-transform: translateX(2px) rotateY(3deg);
|
||||||
|
transform: translateX(2px) rotateY(3deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translateX(0);
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes swing {
|
||||||
|
20% {
|
||||||
|
-webkit-transform: rotate3d(0, 0, 1, 15deg);
|
||||||
|
transform: rotate3d(0, 0, 1, 15deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
-webkit-transform: rotate3d(0, 0, 1, -10deg);
|
||||||
|
transform: rotate3d(0, 0, 1, -10deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
-webkit-transform: rotate3d(0, 0, 1, 5deg);
|
||||||
|
transform: rotate3d(0, 0, 1, 5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
80% {
|
||||||
|
-webkit-transform: rotate3d(0, 0, 1, -5deg);
|
||||||
|
transform: rotate3d(0, 0, 1, -5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
-webkit-transform: rotate3d(0, 0, 1, 0deg);
|
||||||
|
transform: rotate3d(0, 0, 1, 0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes tada {
|
||||||
|
from {
|
||||||
|
-webkit-transform: scale3d(1, 1, 1);
|
||||||
|
transform: scale3d(1, 1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
10%,
|
||||||
|
20% {
|
||||||
|
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
|
||||||
|
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
30%,
|
||||||
|
50%,
|
||||||
|
70%,
|
||||||
|
90% {
|
||||||
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||||||
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
40%,
|
||||||
|
60%,
|
||||||
|
80% {
|
||||||
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||||||
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
-webkit-transform: scale3d(1, 1, 1);
|
||||||
|
transform: scale3d(1, 1, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
||||||
|
@keyframes wobble {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
15% {
|
||||||
|
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
||||||
|
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
||||||
|
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
45% {
|
||||||
|
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
||||||
|
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
||||||
|
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
||||||
|
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes jello {
|
||||||
|
from,
|
||||||
|
11.1%,
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
22.2% {
|
||||||
|
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
|
||||||
|
transform: skewX(-12.5deg) skewY(-12.5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
33.3% {
|
||||||
|
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
|
||||||
|
transform: skewX(6.25deg) skewY(6.25deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
44.4% {
|
||||||
|
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
|
||||||
|
transform: skewX(-3.125deg) skewY(-3.125deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
55.5% {
|
||||||
|
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
|
||||||
|
transform: skewX(1.5625deg) skewY(1.5625deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
66.6% {
|
||||||
|
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
||||||
|
transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
77.7% {
|
||||||
|
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
|
||||||
|
transform: skewX(0.390625deg) skewY(0.390625deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
88.8% {
|
||||||
|
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
||||||
|
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes heartBeat {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
14% {
|
||||||
|
-webkit-transform: scale(1.3);
|
||||||
|
transform: scale(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
28% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
42% {
|
||||||
|
-webkit-transform: scale(1.3);
|
||||||
|
transform: scale(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes flipInX {
|
@keyframes flipInX {
|
||||||
from {
|
from {
|
||||||
|
@ -533,8 +851,26 @@
|
||||||
transform: translate3d(0, -100%, 0);
|
transform: translate3d(0, -100%, 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@keyframes jackInTheBox {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.1) rotate(30deg);
|
||||||
|
transform-origin: center bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: rotate(-10deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
transform: rotate(3deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.flipInX {
|
.flipInX {
|
||||||
backface-visibility: visible !important;
|
backface-visibility: visible !important;
|
||||||
|
@ -600,6 +936,11 @@
|
||||||
.slideInUp {
|
.slideInUp {
|
||||||
animation-name: slideInUp;
|
animation-name: slideInUp;
|
||||||
}
|
}
|
||||||
|
.jackInTheBox {
|
||||||
|
-webkit-animation-name: jackInTheBox;
|
||||||
|
animation-name: jackInTheBox;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.flipOutX {
|
.flipOutX {
|
||||||
|
@ -673,6 +1014,47 @@
|
||||||
animation-name: slideOutUp;
|
animation-name: slideOutUp;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.bounce {
|
||||||
|
animation-name: bounce;
|
||||||
|
transform-origin: center bottom;
|
||||||
|
}
|
||||||
|
.flash {
|
||||||
|
animation-name: flash;
|
||||||
|
}
|
||||||
|
.pulse {
|
||||||
|
animation-name: pulse;
|
||||||
|
}
|
||||||
|
.rubberBand {
|
||||||
|
animation-name: rubberBand;
|
||||||
|
}
|
||||||
|
.shake {
|
||||||
|
animation-name: shake;
|
||||||
|
}
|
||||||
|
.headShake {
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
animation-name: headShake;
|
||||||
|
}
|
||||||
|
.swing {
|
||||||
|
transform-origin: top center;
|
||||||
|
animation-name: swing;
|
||||||
|
}
|
||||||
|
.tada {
|
||||||
|
animation-name: tada;
|
||||||
|
}
|
||||||
|
.wobble {
|
||||||
|
animation-name: wobble;
|
||||||
|
}
|
||||||
|
.jello {
|
||||||
|
animation-name: jello;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
.heartBeat {
|
||||||
|
animation-name: heartBeat;
|
||||||
|
animation-duration: 1.3s;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
.animated {
|
.animated {
|
||||||
animation-duration: 0.5s;
|
animation-duration: 0.5s;
|
||||||
animation-fill-mode: both;
|
animation-fill-mode: both;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
div(:class="$style.aside")
|
div(:class="$style.aside")
|
||||||
div(:class="$style.logo")
|
div(:class="['animated', logoAnimate, $style.logo]")
|
||||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 127 61' space='preserve')
|
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 127 61' space='preserve')
|
||||||
use(xlink:href='#icon-logo')
|
use(xlink:href='#icon-logo')
|
||||||
|
|
||||||
|
@ -29,6 +29,7 @@ div(:class="$style.aside")
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
|
// import { getRandom } from '../../utils'
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
list: {
|
list: {
|
||||||
|
@ -41,12 +42,34 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
active: 'search',
|
active: 'search',
|
||||||
|
animates: [
|
||||||
|
'bounce',
|
||||||
|
// 'flash',
|
||||||
|
// 'pulse',
|
||||||
|
'rubberBand',
|
||||||
|
// 'shake',
|
||||||
|
// 'headShake',
|
||||||
|
'swing',
|
||||||
|
'tada',
|
||||||
|
// 'wobble',
|
||||||
|
'jello',
|
||||||
|
// 'heartBeat',
|
||||||
|
],
|
||||||
|
logoAnimate: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters('list', ['defaultList', 'loveList', 'userList']),
|
...mapGetters('list', ['defaultList', 'loveList', 'userList']),
|
||||||
},
|
},
|
||||||
methods: {},
|
// mounted() {
|
||||||
|
// this.logoAnimate = this.animates[getRandom(0, this.animates.length)]
|
||||||
|
// },
|
||||||
|
// methods: {
|
||||||
|
// handleMouseEnter() {
|
||||||
|
// console.log('object')
|
||||||
|
// this.logoAnimate = this.animates[getRandom(0, this.animates.length)]
|
||||||
|
// },
|
||||||
|
// },
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -77,6 +100,7 @@ export default {
|
||||||
// height: 120px;
|
// height: 120px;
|
||||||
color: @color-theme-font;
|
color: @color-theme-font;
|
||||||
flex: none;
|
flex: none;
|
||||||
|
// -webkit-app-region: no-drag;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
|
|
|
@ -52,6 +52,7 @@ export default {
|
||||||
'slideInLeft',
|
'slideInLeft',
|
||||||
'slideInRight',
|
'slideInRight',
|
||||||
'slideInUp',
|
'slideInUp',
|
||||||
|
'jackInTheBox',
|
||||||
],
|
],
|
||||||
animateOut: [
|
animateOut: [
|
||||||
'flipOutX',
|
'flipOutX',
|
||||||
|
|
Loading…
Reference in New Issue