feat: 通用动画效果
咬轮猫
3 years ago
parent
829a99a732
commit
c958367c99
@ -0,0 +1,6 @@
|
|||||||
|
<svg viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" width="200" height="200">
|
||||||
|
<path
|
||||||
|
d="M919.6 405.6l-57.2-8c-12.7-1.8-23-10.4-28-22.1-11.3-26.7-25.7-51.7-42.9-74.5-7.7-10.2-10-23.5-5.2-35.3l21.7-53.5c6.7-16.4 0.2-35.3-15.2-44.1L669.1 96.6c-15.4-8.9-34.9-5.1-45.8 8.9l-35.4 45.3c-7.9 10.2-20.7 14.9-33.5 13.3-14-1.8-28.3-2.8-42.8-2.8-14.5 0-28.8 1-42.8 2.8-12.8 1.6-25.6-3.1-33.5-13.3l-35.4-45.3c-10.9-14-30.4-17.8-45.8-8.9L230.4 168c-15.4 8.9-21.8 27.7-15.2 44.1l21.7 53.5c4.8 11.9 2.5 25.1-5.2 35.3-17.2 22.8-31.7 47.8-42.9 74.5-5 11.8-15.3 20.4-28 22.1l-57.2 8C86 408 72.9 423 72.9 440.8v142.9c0 17.7 13.1 32.7 30.6 35.2l57.2 8c12.7 1.8 23 10.4 28 22.1 11.3 26.7 25.7 51.7 42.9 74.5 7.7 10.2 10 23.5 5.2 35.3l-21.7 53.5c-6.7 16.4-0.2 35.3 15.2 44.1L354 927.8c15.4 8.9 34.9 5.1 45.8-8.9l35.4-45.3c7.9-10.2 20.7-14.9 33.5-13.3 14 1.8 28.3 2.8 42.8 2.8 14.5 0 28.8-1 42.8-2.8 12.8-1.6 25.6 3.1 33.5 13.3l35.4 45.3c10.9 14 30.4 17.8 45.8 8.9l123.7-71.4c15.4-8.9 21.8-27.7 15.2-44.1l-21.7-53.5c-4.8-11.8-2.5-25.1 5.2-35.3 17.2-22.8 31.7-47.8 42.9-74.5 5-11.8 15.3-20.4 28-22.1l57.2-8c17.6-2.5 30.6-17.5 30.6-35.2V440.8c0.2-17.8-12.9-32.8-30.5-35.2z m-408 245.5c-76.7 0-138.9-62.2-138.9-138.9s62.2-138.9 138.9-138.9 138.9 62.2 138.9 138.9-62.2 138.9-138.9 138.9z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,105 @@
|
|||||||
|
<!-- eslint-disable vue/html-indent -->
|
||||||
|
<template>
|
||||||
|
<div style="height: 100%">
|
||||||
|
<el-tag
|
||||||
|
closable
|
||||||
|
v-if="select_val"
|
||||||
|
@close="addAnimation('')"
|
||||||
|
@click="drawer_visiable = true"
|
||||||
|
style="cursor: pointer"
|
||||||
|
>{{
|
||||||
|
common_animate_list
|
||||||
|
.map((m) => m.children)
|
||||||
|
.reduce((pre, curr) => {
|
||||||
|
return pre.concat(curr);
|
||||||
|
})
|
||||||
|
.find((f) => f.value == select_val)?.label
|
||||||
|
}}
|
||||||
|
<el-icon :size="10"> <svg-analysis name="setting"></svg-analysis> </el-icon
|
||||||
|
></el-tag>
|
||||||
|
<el-tag v-else type="success" style="cursor: pointer" @click="drawer_visiable = true"
|
||||||
|
>新增</el-tag
|
||||||
|
>
|
||||||
|
<el-drawer v-model="drawer_visiable" title="选择动画" direction="ltr">
|
||||||
|
<el-tabs v-model="activeName">
|
||||||
|
<el-tab-pane
|
||||||
|
:label="tab_item.label"
|
||||||
|
:name="tab_item.label"
|
||||||
|
v-for="tab_item in common_animate_list"
|
||||||
|
:key="tab_item.label"
|
||||||
|
>
|
||||||
|
<el-scrollbar height="500px">
|
||||||
|
<div class="flex flex-wrap">
|
||||||
|
<div
|
||||||
|
class="animate"
|
||||||
|
v-for="(animate, index) in tab_item.children"
|
||||||
|
:key="index"
|
||||||
|
@mouseenter="play_index = index"
|
||||||
|
@mouseleave="play_index = null"
|
||||||
|
@click="addAnimation(animate.value)"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
:class="`${
|
||||||
|
play_index == index
|
||||||
|
? `animate__animated animate__${animate.value} animate__slow animate__infinite`
|
||||||
|
: ''
|
||||||
|
}`"
|
||||||
|
>
|
||||||
|
{{ animate.label }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-scrollbar></el-tab-pane
|
||||||
|
>
|
||||||
|
</el-tabs>
|
||||||
|
</el-drawer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ElTag, ElDrawer, ElTabs, ElTabPane, ElScrollbar, ElIcon } from 'element-plus';
|
||||||
|
import { ref, watch } from 'vue';
|
||||||
|
import { common_animate_list } from '@/config-center/system/index';
|
||||||
|
import SvgAnalysis from '@/components/svg-analysis/index.vue';
|
||||||
|
const props = defineProps({
|
||||||
|
val: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const emits = defineEmits(['updateCommonAniVal']);
|
||||||
|
const select_val = ref(props.val);
|
||||||
|
const drawer_visiable = ref(false);
|
||||||
|
const activeName = ref('进入');
|
||||||
|
const play_index = ref<null | number>(null);
|
||||||
|
const addAnimation = (val: string) => {
|
||||||
|
emits('updateCommonAniVal', val);
|
||||||
|
drawer_visiable.value = false;
|
||||||
|
};
|
||||||
|
watch(
|
||||||
|
() => props.val,
|
||||||
|
(new_val) => {
|
||||||
|
select_val.value = new_val;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.animate {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate > div {
|
||||||
|
width: 80px;
|
||||||
|
height: 60px;
|
||||||
|
background: #f5f8fb;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 12px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #333;
|
||||||
|
border-radius: 3px;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue