新增动画逻辑处理
于肖磊
parent
fd403ac397
commit
bcd1aa1281
1
App.vue
1
App.vue
|
|
@ -3128,4 +3128,5 @@
|
|||
@import './common/css/plugins.css';
|
||||
@import './common/css/lib.css';
|
||||
@import './common/css/theme.css';
|
||||
@import './common/css/animation.css';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,758 @@
|
|||
/*
|
||||
* 放大缩小
|
||||
*/
|
||||
.scale-up-center {
|
||||
-webkit-animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
|
||||
animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
|
||||
}
|
||||
|
||||
.scale-up-center-infinite {
|
||||
-webkit-animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
|
||||
animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
|
||||
}
|
||||
|
||||
@keyframes scale-up-center {
|
||||
0% {
|
||||
-webkit-transform: scale(0.5);
|
||||
transform: scale(0.5);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
/*
|
||||
* 中心缩小
|
||||
*/
|
||||
.scale-out-center {
|
||||
-webkit-animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
|
||||
animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
|
||||
}
|
||||
.scale-out-center-infinite {
|
||||
-webkit-animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
|
||||
animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
|
||||
}
|
||||
|
||||
@keyframes scale-out-center {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/*
|
||||
* 垂直放大
|
||||
*/
|
||||
.scale-up-ver-bottom {
|
||||
-webkit-animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
|
||||
animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
|
||||
}
|
||||
|
||||
.scale-up-ver-bottom-infinite {
|
||||
-webkit-animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
|
||||
animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
|
||||
}
|
||||
@keyframes scale-up-ver-bottom {
|
||||
0% {
|
||||
-webkit-transform: scaleY(0.4);
|
||||
transform: scaleY(0.4);
|
||||
-webkit-transform-origin: 50%;
|
||||
transform-origin: 50%;
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
-webkit-transform-origin: 50%;
|
||||
transform-origin: 50%;
|
||||
}
|
||||
85% {
|
||||
-webkit-transform: rotate(-8deg);
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
95% {
|
||||
-webkit-transform: rotate(8deg);
|
||||
transform: rotate(8deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
/*
|
||||
* 交替垂直
|
||||
*/放大
|
||||
.scale-up-ver-bottom-alternate {
|
||||
-webkit-animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
|
||||
animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
|
||||
}
|
||||
.scale-up-ver-bottom-alternate-infinite {
|
||||
-webkit-animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
|
||||
animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
|
||||
}
|
||||
@keyframes scale-up-ver-bottom-alternate {
|
||||
0% {
|
||||
-webkit-transform: scaleY(0.4);
|
||||
transform: scaleY(0.4);
|
||||
-webkit-transform-origin: 0% 100%;
|
||||
transform-origin: 0% 100%;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
-webkit-transform-origin: 0% 100%;
|
||||
transform-origin: 0% 100%;
|
||||
}
|
||||
}
|
||||
/*
|
||||
* 中间区域放大
|
||||
*/
|
||||
.scale-up-ver-center {
|
||||
-webkit-animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
|
||||
animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
|
||||
}
|
||||
.scale-up-ver-center-infinite {
|
||||
-webkit-animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
|
||||
animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
|
||||
}
|
||||
|
||||
@keyframes scale-up-ver-center {
|
||||
0% {
|
||||
-webkit-transform: scaleY(0.4);
|
||||
transform: scaleY(0.4);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 淡出
|
||||
.
|
||||
*/fade-out-fwd {
|
||||
-webkit-animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||
animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||
}
|
||||
.fade-out-fwd-infinite {
|
||||
-webkit-animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
|
||||
animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
|
||||
}
|
||||
@keyframes fade-out-fwd {
|
||||
0% {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateZ(80px);
|
||||
transform: translateZ(80px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
/*
|
||||
* 淡入
|
||||
*/
|
||||
.fade-in-bck {
|
||||
-webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
|
||||
animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
|
||||
}
|
||||
.fade-in-bck-infinite {
|
||||
-webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
|
||||
animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
|
||||
}
|
||||
/*
|
||||
* 淡入淡出
|
||||
*/
|
||||
.fade-in-bck-alternate {
|
||||
-webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
|
||||
animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
|
||||
}
|
||||
.fade-in-bck-alternate-infinite {
|
||||
-webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
|
||||
animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
|
||||
}
|
||||
@keyframes fade-in-bck {
|
||||
0% {
|
||||
-webkit-transform: translateZ(80px);
|
||||
transform: translateZ(80px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/*
|
||||
* 文字铺开
|
||||
*/
|
||||
.tracking-in-expand {
|
||||
-webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
|
||||
animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
|
||||
}
|
||||
|
||||
.tracking-in-expand-infinite {
|
||||
-webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite both;
|
||||
animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite both;
|
||||
}
|
||||
|
||||
@keyframes tracking-in-expand {
|
||||
0% {
|
||||
letter-spacing: -0.5em;
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 心跳
|
||||
*/
|
||||
.heartbeat {
|
||||
-webkit-animation: heartbeat 1s ease-in-out both;
|
||||
animation: heartbeat 1s ease-in-out both;
|
||||
}
|
||||
|
||||
.heartbeat-infinite {
|
||||
-webkit-animation: heartbeat 1s ease-in-out infinite both;
|
||||
animation: heartbeat 1s ease-in-out infinite both;
|
||||
}
|
||||
|
||||
@keyframes heartbeat {
|
||||
from {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
10% {
|
||||
-webkit-transform: scale(0.91);
|
||||
transform: scale(0.91);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
17% {
|
||||
-webkit-transform: scale(0.98);
|
||||
transform: scale(0.98);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
33% {
|
||||
-webkit-transform: scale(0.87);
|
||||
transform: scale(0.87);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
45% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 脉动
|
||||
*/
|
||||
.pulsate-bck {
|
||||
-webkit-animation: pulsate-bck 1s ease-in-out both;
|
||||
animation: pulsate-bck 1s ease-in-out both;
|
||||
}
|
||||
|
||||
.pulsate-bck-infinite {
|
||||
-webkit-animation: pulsate-bck 1s ease-in-out infinite both;
|
||||
animation: pulsate-bck 1s ease-in-out infinite both;
|
||||
}
|
||||
|
||||
@keyframes pulsate-bck {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(0.9);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 向上弹跳
|
||||
*/
|
||||
.bounce-top {
|
||||
-webkit-animation: bounce-top 1.5s both;
|
||||
animation: bounce-top 1.5s both;
|
||||
}
|
||||
.bounce-top-infinite {
|
||||
-webkit-animation: bounce-top 1.5s infinite both;
|
||||
animation: bounce-top 1.5s infinite both;
|
||||
}
|
||||
|
||||
@keyframes bounce-top {
|
||||
0%, 30%, 60%, 100% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
15% {
|
||||
-webkit-transform: translateY(-40px);
|
||||
transform: translateY(-40px);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
45% {
|
||||
-webkit-transform: translateY(-20px);
|
||||
transform: translateY(-20px);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translateY(-8px);
|
||||
transform: translateY(-8px);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 向下弹跳
|
||||
*/
|
||||
.bounce-bottom {
|
||||
-webkit-animation: bounce-bottom 1.5s both;
|
||||
animation: bounce-bottom 1.5s both;
|
||||
}
|
||||
.bounce-bottom-infinite {
|
||||
-webkit-animation: bounce-bottom 1.5s infinite both;
|
||||
animation: bounce-bottom 1.5s infinite both;
|
||||
}
|
||||
|
||||
@keyframes bounce-bottom {
|
||||
0%, 30%, 60%, 100% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
15% {
|
||||
-webkit-transform: translateY(40px);
|
||||
transform: translateY(40px);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
45% {
|
||||
-webkit-transform: translateY(20px);
|
||||
transform: translateY(20px);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translateY(8px);
|
||||
transform: translateY(8px);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 向左弹跳
|
||||
*/
|
||||
.bounce-left {
|
||||
-webkit-animation: bounce-left 1.5s both;
|
||||
animation: bounce-left 1.5s both;
|
||||
}
|
||||
.bounce-left-infinite {
|
||||
-webkit-animation: bounce-left 1.5s infinite both;
|
||||
animation: bounce-left 1.5s infinite both;
|
||||
}
|
||||
|
||||
@keyframes bounce-left {
|
||||
0%, 30%, 60%, 100% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
15% {
|
||||
-webkit-transform: translateX(-40px);
|
||||
transform: translateX(-40px);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
45% {
|
||||
-webkit-transform: translateX(-20px);
|
||||
transform: translateX(-20px);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translateX(-8px);
|
||||
transform: translateX(-8px);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
/*
|
||||
* 向右弹跳
|
||||
*/
|
||||
.bounce-right {
|
||||
-webkit-animation: bounce-right 1.5s both;
|
||||
animation: bounce-right 1.5s both;
|
||||
}
|
||||
.bounce-right-infinite {
|
||||
-webkit-animation: bounce-right 1.5s infinite both;
|
||||
animation: bounce-right 1.5s infinite both;
|
||||
}
|
||||
|
||||
@keyframes bounce-right {
|
||||
0%, 30%, 60%, 100% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
15% {
|
||||
-webkit-transform: translateX(40px);
|
||||
transform: translateX(40px);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
45% {
|
||||
-webkit-transform: translateX(20px);
|
||||
transform: translateX(20px);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translateX(8px);
|
||||
transform: translateX(8px);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
/*
|
||||
* 左侧弹跳
|
||||
*/
|
||||
.bounce-in-left {
|
||||
-webkit-animation: bounce-in-left 2s both;
|
||||
animation: bounce-in-left 2s both;
|
||||
}
|
||||
.bounce-in-left-infinite {
|
||||
-webkit-animation: bounce-in-left 2s infinite both;
|
||||
animation: bounce-in-left 2s infinite both;
|
||||
}
|
||||
|
||||
@keyframes bounce-in-left {
|
||||
0% {
|
||||
-webkit-transform: translateX(-500px);
|
||||
transform: translateX(-500px);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
opacity: 0;
|
||||
}
|
||||
38% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
opacity: 1;
|
||||
}
|
||||
55% {
|
||||
-webkit-transform: translateX(-68px);
|
||||
transform: translateX(-68px);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
72% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
81% {
|
||||
-webkit-transform: translateX(-28px);
|
||||
transform: translateX(-28px);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
90% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
95% {
|
||||
-webkit-transform: translateX(-8px);
|
||||
transform: translateX(-8px);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 翻转
|
||||
*/
|
||||
.flip-in-diag-2-tl {
|
||||
-webkit-animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||
animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||
}
|
||||
.flip-in-diag-2-tl-infinite {
|
||||
-webkit-animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
|
||||
animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
|
||||
}
|
||||
|
||||
@keyframes flip-in-diag-2-tl {
|
||||
0% {
|
||||
-webkit-transform: rotate3d(-1, 1, 0, 80deg);
|
||||
transform: rotate3d(-1, 1, 0, 80deg);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate3d(1, 1, 0, 0deg);
|
||||
transform: rotate3d(1, 1, 0, 0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 从左滑动
|
||||
*/
|
||||
.slide-in-left {
|
||||
-webkit-animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||
animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||
}
|
||||
|
||||
.slide-in-left-infinite {
|
||||
-webkit-animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
|
||||
animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
|
||||
}
|
||||
|
||||
@keyframes slide-in-left {
|
||||
0% {
|
||||
-webkit-transform: translateX(-500px);
|
||||
transform: translateX(-500px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 在fwd
|
||||
*/中心滑动
|
||||
.slide-in-fwd-center {
|
||||
-webkit-animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||
animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||
}
|
||||
|
||||
.slide-in-fwd-center-infinite {
|
||||
-webkit-animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
|
||||
animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
|
||||
}
|
||||
|
||||
@keyframes slide-in-fwd-center {
|
||||
0% {
|
||||
-webkit-transform: translateZ(-1400px);
|
||||
transform: translateZ(-1400px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/*
|
||||
* 左前轮旋转
|
||||
*/
|
||||
.swirl-in-left-fwd {
|
||||
-webkit-animation: swirl-in-left-fwd 2s ease-out both;
|
||||
animation: swirl-in-left-fwd 2s ease-out both;
|
||||
}
|
||||
.swirl-in-left-fwd-infinite {
|
||||
-webkit-animation: swirl-in-left-fwd 2s ease-out infinite both;
|
||||
animation: swirl-in-left-fwd 2s ease-out infinite both;
|
||||
}
|
||||
@keyframes swirl-in-left-fwd {
|
||||
0% {
|
||||
-webkit-transform: rotate(-540deg) scale(0);
|
||||
transform: rotate(-540deg) scale(0);
|
||||
-webkit-transform-origin: 0 50%;
|
||||
transform-origin: 0 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(0) scale(1);
|
||||
transform: rotate(0) scale(1);
|
||||
-webkit-transform-origin: 0 50%;
|
||||
transform-origin: 0 50%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/*
|
||||
* 摇动
|
||||
*/
|
||||
.shake-bottom {
|
||||
-webkit-animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
|
||||
animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
|
||||
}
|
||||
.shake-bottom-infinite {
|
||||
-webkit-animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
|
||||
animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
|
||||
}
|
||||
@keyframes shake-bottom {
|
||||
0% {
|
||||
-webkit-transform: scale(1) rotate(0deg);
|
||||
transform: scale(1) rotate(0deg);
|
||||
-webkit-transform-origin: 50%;
|
||||
transform-origin: 50%;
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
-webkit-transform-origin: 50%;
|
||||
transform-origin: 50%;
|
||||
}
|
||||
85% {
|
||||
-webkit-transform: rotate(-16deg);
|
||||
transform: rotate(-16deg);
|
||||
}
|
||||
95% {
|
||||
-webkit-transform: rotate(16deg);
|
||||
transform: rotate(16deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-transform-origin: 50%;
|
||||
transform-origin: 50%;
|
||||
}
|
||||
}
|
||||
/*
|
||||
* 震动
|
||||
*/
|
||||
.vibrate {
|
||||
-webkit-animation: vibrate 0.3s linear both;
|
||||
animation: vibrate 0.3s linear both;
|
||||
}
|
||||
.vibrate-infinite {
|
||||
-webkit-animation: vibrate 0.3s linear infinite both;
|
||||
animation: vibrate 0.3s linear infinite both;
|
||||
}
|
||||
|
||||
@keyframes vibrate {
|
||||
0% {
|
||||
-webkit-transform: translate(0);
|
||||
transform: translate(0);
|
||||
}
|
||||
20% {
|
||||
-webkit-transform: translate(2px, -2px);
|
||||
transform: translate(2px, -2px);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: translate(2px, 2px);
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
60% {
|
||||
-webkit-transform: translate(-2px, 2px);
|
||||
transform: translate(-2px, 2px);
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: translate(-2px, -2px);
|
||||
transform: translate(-2px, -2px);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translate(0);
|
||||
transform: translate(0);
|
||||
}
|
||||
}
|
||||
/*
|
||||
* 模糊显示
|
||||
*/
|
||||
.text-focus-in {
|
||||
-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
|
||||
animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
|
||||
}
|
||||
.text-focus-in-infinite {
|
||||
-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
|
||||
animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
|
||||
}
|
||||
|
||||
@keyframes text-focus-in {
|
||||
0% {
|
||||
-webkit-filter: blur(12px);
|
||||
filter: blur(12px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-filter: blur(0px);
|
||||
filter: blur(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 果冻
|
||||
*/
|
||||
.jello-horizontal {
|
||||
-webkit-animation: jello-horizontal 0.9s both;
|
||||
animation: jello-horizontal 0.9s both;
|
||||
}
|
||||
.jello-horizontal-infinite {
|
||||
-webkit-animation: jello-horizontal 0.9s infinite both;
|
||||
animation: jello-horizontal 0.9s infinite both;
|
||||
}
|
||||
@keyframes jello-horizontal {
|
||||
0% {
|
||||
-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);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="wh-auto pr" :style="'height:' + propDataHeight * propScale + 'px;'">
|
||||
<view v-for="(item, index) in propCustomList" :key="item.id" class="main-content" :style="{ left: get_percentage_count(item.location.x), top: get_percentage_count(item.location.y), width: get_percentage_count(item.com_data.com_width), height: get_percentage_count(item.com_data.com_height), 'z-index': propCustomList.length - 1 > 0 ? (propCustomList.length - 1) - index : 0 }">
|
||||
<view v-for="(item, index) in propCustomList" :key="item.id" :class="'main-content ' + get_animation_class(item.com_data)" :style="{ left: get_percentage_count(item.location.x), top: get_percentage_count(item.location.y), width: get_percentage_count(item.com_data.com_width), height: get_percentage_count(item.com_data.com_height), 'z-index': propCustomList.length - 1 > 0 ? (propCustomList.length - 1) - index : 0 }">
|
||||
<template v-if="item.key == 'text'">
|
||||
<model-text :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propFieldList="propFieldList" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :propIsCustomGroup="propIsCustomGroup" :propCustomGroupFieldId="propCustomGroupFieldId" :propTitleParams="propShowData.data_name" @url_event="url_event"></model-text>
|
||||
</template>
|
||||
|
|
@ -103,6 +103,16 @@ export default {
|
|||
return num * this.propScale + 'px';
|
||||
};
|
||||
},
|
||||
get_animation_class() {
|
||||
return (data) => {
|
||||
const { type = 'none', number = 'infinite' } = data?.animation_style || {};
|
||||
if (type != 'none') {
|
||||
return type + (number == 'infinite' ? `-${number}` : '');
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
url_event(e) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="wh-auto pr" :style="'height:' + propDataHeight * propScale + 'px;'">
|
||||
<view v-for="(item, index) in propCustomList" :key="item.id" class="main-content" :style="{ left: get_percentage_count(item.location.x), top: get_percentage_count(item.location.y), width: get_percentage_count(item.com_data.com_width), height: get_percentage_count(item.com_data.com_height), 'z-index': propCustomList.length - 1 > 0 ? (propCustomList.length - 1) - index : 0 }">
|
||||
<view v-for="(item, index) in propCustomList" :key="item.id" :class="'main-content ' + get_animation_class(item.com_data)" :style="{ left: get_percentage_count(item.location.x), top: get_percentage_count(item.location.y), width: get_percentage_count(item.com_data.com_width), height: get_percentage_count(item.com_data.com_height), 'z-index': propCustomList.length - 1 > 0 ? (propCustomList.length - 1) - index : 0 }">
|
||||
<template v-if="item.key == 'text'">
|
||||
<model-text :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propFieldList="propFieldList" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :propIsCustomGroup="propIsCustomGroup" :propCustomGroupFieldId="propCustomGroupFieldId" :propTitleParams="propShowData.data_name" @url_event="url_event"></model-text>
|
||||
</template>
|
||||
|
|
@ -114,6 +114,16 @@ export default {
|
|||
return num * this.propScale + 'px';
|
||||
};
|
||||
},
|
||||
get_animation_class() {
|
||||
return (data) => {
|
||||
const { type = 'none', number = 'infinite' } = data?.animation_style || {};
|
||||
if (type != 'none') {
|
||||
return type + (number == 'infinite' ? `-${number}` : '');
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
url_event(e) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue