study/ClipboardManager
1
0
Fork 0
mirror of https://github.com/ZiuChen/ClipboardManager.git synced 2025-06-12 18:34:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 为侧栏添加渐入渐出动效

Browse Source
This commit is contained in:
ZiuChen 2022-08-15 17:31:23 +08:00
parent a21882a250
commit 532cb60292
1 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/cpns/ClipFullData.vue
View File

@ -1,15 +1,17 @@
<template> <template>
<div class="clip-full-data"> <div class="clip-full-data">
<div class="clip-full" v-show="isShow"> <Transition name="fade">
<div v-if="fullData.type === 'text'"> <div class="clip-full" v-show="isShow">
<div v-text="fullData.data"></div> <div v-if="fullData.type === 'text'">
<div v-text="fullData.data"></div>
</div>
<div v-else>
<FileList :data="fullData.data"></FileList>
</div>
</div> </div>
<div v-else> </Transition>
<FileList :data="fullData.data"></FileList> <div class="clip-overlay" v-show="isShow" @click="onOverlayClick"></div>
</div>
</div>
</div> </div>
<div class="clip-overlay" v-show="isShow" @click="onOverlayClick"></div>
</template> </template>
<script setup> <script setup>
@ -32,4 +34,13 @@ const onOverlayClick = () => emit('onOverlayClick')
<style lang="less" scoped> <style lang="less" scoped>
@import '../style'; @import '../style';
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style> </style>