添加其他动画
lyswhut
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 {
|
||||
from {
|
||||
|
|
@ -533,8 +851,26 @@
|
|||
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 {
|
||||
backface-visibility: visible !important;
|
||||
|
|
@ -600,6 +936,11 @@
|
|||
.slideInUp {
|
||||
animation-name: slideInUp;
|
||||
}
|
||||
.jackInTheBox {
|
||||
-webkit-animation-name: jackInTheBox;
|
||||
animation-name: jackInTheBox;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flipOutX {
|
||||
|
|
@ -673,6 +1014,47 @@
|
|||
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 {
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: both;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template lang="pug">
|
||||
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')
|
||||
use(xlink:href='#icon-logo')
|
||||
|
||||
|
|
@ -29,6 +29,7 @@ div(:class="$style.aside")
|
|||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
// import { getRandom } from '../../utils'
|
||||
export default {
|
||||
props: {
|
||||
list: {
|
||||
|
|
@ -41,12 +42,34 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
active: 'search',
|
||||
animates: [
|
||||
'bounce',
|
||||
// 'flash',
|
||||
// 'pulse',
|
||||
'rubberBand',
|
||||
// 'shake',
|
||||
// 'headShake',
|
||||
'swing',
|
||||
'tada',
|
||||
// 'wobble',
|
||||
'jello',
|
||||
// 'heartBeat',
|
||||
],
|
||||
logoAnimate: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...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>
|
||||
|
||||
|
|
@ -77,6 +100,7 @@ export default {
|
|||
// height: 120px;
|
||||
color: @color-theme-font;
|
||||
flex: none;
|
||||
// -webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.menu {
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ export default {
|
|||
'slideInLeft',
|
||||
'slideInRight',
|
||||
'slideInUp',
|
||||
'jackInTheBox',
|
||||
],
|
||||
animateOut: [
|
||||
'flipOutX',
|
||||
|
|
|
|||
Loading…
Reference in New Issue