优化元素动画选择面板体验

This commit is contained in:
pipipi-pikachu 2021-01-22 09:55:23 +08:00
parent d54a468378
commit 1f227e19ae

View File

@ -10,19 +10,24 @@
<div <div
class="pool-item" class="pool-item"
v-for="item in type.children" :key="item.name" v-for="item in type.children" :key="item.name"
@mouseenter="hoverPreviewAnimation = item.value"
@mouseleave="hoverPreviewAnimation = ''"
@click="addAnimation(item.value)"
>
<div
class="animation-box"
:class="[ :class="[
'animate__animated', 'animate__animated',
'animate__faster', 'animate__faster',
hoverPreviewAnimation === item.value && `animate__${item.value}`, hoverPreviewAnimation === item.value && `animate__${item.value}`,
]" ]"
@mouseover="hoverPreviewAnimation = item.value"
@click="addAnimation(item.value)"
> >
{{item.name}} {{item.name}}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<Button class="element-animation-btn"> <Button class="element-animation-btn">
<IconEffects style="margin-right: 5px;" /> {{handleElementAnimation || '点击选择动画'}} <IconEffects style="margin-right: 5px;" /> {{handleElementAnimation || '点击选择动画'}}