动画效果新增

2025-01-14 17:47:01 +08:00 · 2025-01-14 17:47:01 +08:00 · 93f308f7dd
parent 34bbad0b3c
commit 93f308f7dd
4 changed files with 434 additions and 1 deletions
--- a/src/components/common/common-content-top/index.vue
+++ b/src/components/common/common-content-top/index.vue
@ -31,6 +31,6 @@ let form = ref(props.value);

 <style scoped lang="scss">
 :deep(.el-date-editor .el-range-input) {
-    font-size: 1rem;
+    font-size: 1.2rem;
 }
 </style>
--- a/src/components/common/custom-module/animation-config/index.vue
+++ b/src/components/common/custom-module/animation-config/index.vue
@ -0,0 +1,52 @@
+<template>
+    <card-container>
+        <div class="mb-12">动画设置</div>
+        <el-form-item label="动画效果">
+            <el-select v-model="animation_type" value-key="id" filterable placeholder="请选择动画效果" size="default" class="flex-1" @change="operation_end">
+                <el-option v-for="item in animation_option" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+        </el-form-item>
+        <el-form-item label="动画次数">
+            <el-select v-model="animation_number" value-key="id" filterable placeholder="请选择动画次数" size="default" class="flex-1" @change="operation_end">
+                <el-option v-for="item in animation_number_option" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+        </el-form-item>
+    </card-container>
+</template>
+
+<script lang="ts" setup>
+// 动画类型
+const animation_type = defineModel('type', { type: String, default: 'default' });
+// 动画次数
+const animation_number = defineModel('number', { type: String, default: 'default' });
+// 动画类型选项
+const animation_option = [
+    { name: '无', value: 'default' },
+    { name: '中心放大', value: 'scale-up-center' },
+    { name: '中心缩小', value: 'scale-out-center' },
+    { name: '垂直放大', value: 'scale-up-ver-bottom' },
+    { name: '垂直循环', value: 'scale-up-ver-bottom-alternate' },
+    { name: '中心区域放大', value: 'scale-up-ver-center' },
+    { name: '淡出', value: 'fade-out-fwd' },
+    { name: '淡入', value: 'fade-in-bck' },
+    { name: '淡入淡出', value: 'fade-in-bck-alternate' },
+    { name: '文字铺开', value: 'tracking-in-expand' },
+    { name: '左侧弹跳', value: 'bounce-in-left' },
+    { name: '右侧滑动', value: 'slide-in-left' },
+    { name: '中心滑动', value: 'slide-in-fwd-center' },
+    { name: '心跳', value: 'heartbeat' },
+    { name: '脉动', value: 'pulsate-bck' },
+    { name: '翻转', value: 'flip-in-diag-2-tl' },
+];
+// 动画类型次数
+const animation_number_option = [
+    { name: '单次', value: 'default' },
+    { name: '无限', value: 'infinite' }
+]
+
+// 操作结束
+const emit = defineEmits(['operation_end']);
+const operation_end = () => {
+    emit('operation_end');
+};
+</script>
--- a/src/styles/animation.scss
+++ b/src/styles/animation.scss
@ -0,0 +1,380 @@
+// 放大缩小
+.scale-up-center {
+	-webkit-animation: slide-out-bck-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+	        animation: slide-out-bck-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+}
+
+.slide-out-bck-center-infinite {
+	-webkit-animation: slide-out-bck-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
+	        animation: slide-out-bck-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
+}
+
+@keyframes slide-out-bck-center {
+    0% {
+      -webkit-transform: translateZ(0);
+              transform: translateZ(0);
+      opacity: 1;
+    }
+    100% {
+      -webkit-transform: translateZ(-1100px);
+              transform: translateZ(-1100px);
+      opacity: 0;
+    }
+  }
+// 中心缩小
+.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;
+}
+// 交替垂直放大
+.scale-up-ver-bottom-alternate {
+    -webkit-animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
+	        animation: scale-up-ver-bottom 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 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
+	        animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
+}
+@keyframes scale-up-ver-bottom {
+    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-in-left {
+	-webkit-animation: bounce-in-left 1.1s both;
+	        animation: bounce-in-left 1.1s both;
+}
+.bounce-in-left-infinite {
+	-webkit-animation: bounce-in-left 1.1s infinite both;
+	        animation: bounce-in-left 1.1s 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 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	        animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+.slide-in-left-infinite {
+	-webkit-animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
+	        animation: slide-in-left 1s 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;
+    }
+  }
+  
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@ -1,6 +1,7 @@
@import './common.scss';
@import './lib.scss';
@import './base.scss';
+@import './animation.scss';
 /**
 * 响应式布局容器固定宽度
 *