feat: 新增 transition 组件 type 属性, 默认为 collapse
This commit is contained in:
就眠儀式
parent
8d2e798f89
commit
06dbd4f4ca
@ -1,7 +1,7 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 过渡效果的使用将大幅提升用户的使用体验。
|
||||
@ -17,14 +17,7 @@
|
||||
<br/>
|
||||
<br/>
|
||||
<lay-transition>
|
||||
<div v-show="visible" style="width:300px;background: #79C48C;border-radius: 4px;padding:20px;">
|
||||
<li>1</li>
|
||||
<li>1</li>
|
||||
<li>1</li>
|
||||
<li>1</li>
|
||||
<li>1</li>
|
||||
<li>1</li>
|
||||
</div>
|
||||
<lay-card title="标题" v-if="visible">内容</lay-card>
|
||||
</lay-transition>
|
||||
</template>
|
||||
|
||||
@ -48,3 +41,38 @@ export default {
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-transition` 标签, 为元素提供过渡动画
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible1">开始</lay-button>
|
||||
<br/>
|
||||
<br/>
|
||||
<lay-transition type="fade">
|
||||
<lay-card title="标题" v-if="visible1">内容</lay-card>
|
||||
</lay-transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const visible1 = ref(true);
|
||||
|
||||
const changeVisible1 = () => {
|
||||
visible1.value = !visible1.value;
|
||||
}
|
||||
|
||||
return {
|
||||
changeVisible1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
86
src/component/transition/collapseTransition.vue
Normal file
86
src/component/transition/collapseTransition.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<transition
|
||||
v-on:before-enter="beforeEnter"
|
||||
v-on:enter="enter"
|
||||
v-on:after-enter="afterEnter"
|
||||
v-on:enter-cancelled="enterCancelled"
|
||||
v-on:before-leave="beforeLeave"
|
||||
v-on:leave="leave"
|
||||
v-on:after-leave="afterLeave"
|
||||
v-on:leave-cancelled="leaveCancelled"
|
||||
>
|
||||
<slot></slot>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayCollapseTransition",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
const elTransition =
|
||||
"0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
|
||||
|
||||
const beforeEnter = (el: any) => {
|
||||
el.style.transition = elTransition;
|
||||
if (!el.dataset) el.dataset = {};
|
||||
el.dataset.oldPaddingTop = el.style.paddingTop;
|
||||
el.dataset.oldPaddingBottom = el.style.paddingBottom;
|
||||
el.style.height = 0;
|
||||
el.style.paddingTop = 0;
|
||||
el.style.paddingBottom = 0;
|
||||
};
|
||||
|
||||
const enter = (el: any) => {
|
||||
el.dataset.oldOverflow = el.style.overflow;
|
||||
if (el.scrollHeight !== 0) {
|
||||
el.style.height = el.scrollHeight + "px";
|
||||
el.style.paddingTop = el.dataset.oldPaddingTop;
|
||||
el.style.paddingBottom = el.dataset.oldPaddingBottom;
|
||||
} else {
|
||||
el.style.height = "";
|
||||
el.style.paddingTop = el.dataset.oldPaddingTop;
|
||||
el.style.paddingBottom = el.dataset.oldPaddingBottom;
|
||||
}
|
||||
el.style.overflow = "hidden";
|
||||
};
|
||||
|
||||
const afterEnter = (el: any) => {
|
||||
el.style.transition = "";
|
||||
el.style.height = "";
|
||||
el.style.overflow = el.dataset.oldOverflow;
|
||||
};
|
||||
|
||||
const beforeLeave = (el: any) => {
|
||||
if (!el.dataset) el.dataset = {};
|
||||
el.dataset.oldPaddingTop = el.style.paddingTop;
|
||||
el.dataset.oldPaddingBottom = el.style.paddingBottom;
|
||||
el.dataset.oldOverflow = el.style.overflow;
|
||||
var computedStyle = getComputedStyle(el, null);
|
||||
el.style.height =
|
||||
el.scrollHeight -
|
||||
parseInt(computedStyle.paddingTop) -
|
||||
parseInt(computedStyle.paddingBottom) +
|
||||
"px";
|
||||
el.style.overflow = "hidden";
|
||||
};
|
||||
|
||||
const leave = (el: any) => {
|
||||
if (el.scrollHeight !== 0) {
|
||||
el.style.transition = elTransition;
|
||||
el.style.height = 0;
|
||||
el.style.paddingTop = 0;
|
||||
el.style.paddingBottom = 0;
|
||||
}
|
||||
};
|
||||
|
||||
const afterLeave = (el: any) => {
|
||||
el.style.transition = "";
|
||||
el.style.height = "";
|
||||
el.style.overflow = el.dataset.oldOverflow;
|
||||
el.style.paddingTop = el.dataset.oldPaddingTop;
|
||||
el.style.paddingBottom = el.dataset.oldPaddingBottom;
|
||||
};
|
||||
</script>
|
||||
21
src/component/transition/fadeTransition.vue
Normal file
21
src/component/transition/fadeTransition.vue
Normal file
@ -0,0 +1,21 @@
|
||||
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<slot></slot>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.fade-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-enter-active {
|
||||
transition: opacity 1s;
|
||||
}
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-leave-active {
|
||||
transition: opacity 1s;
|
||||
}
|
||||
</style>
|
||||
@ -1,16 +1,6 @@
|
||||
<template>
|
||||
<transition
|
||||
v-on:before-enter="beforeEnter"
|
||||
v-on:enter="enter"
|
||||
v-on:after-enter="afterEnter"
|
||||
v-on:enter-cancelled="enterCancelled"
|
||||
v-on:before-leave="beforeLeave"
|
||||
v-on:leave="leave"
|
||||
v-on:after-leave="afterLeave"
|
||||
v-on:leave-cancelled="leaveCancelled"
|
||||
>
|
||||
<slot></slot>
|
||||
</transition>
|
||||
<LayCollapseTransition v-if="type==='collapse'"><slot></slot></LayCollapseTransition>
|
||||
<LayFadeTransition v-if="type==='fade'"><slot></slot></LayFadeTransition>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@ -20,67 +10,14 @@ export default {
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
const elTransition =
|
||||
"0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
|
||||
import LayCollapseTransition from "./collapseTransition.vue";
|
||||
import LayFadeTransition from "./fadeTransition.vue";
|
||||
|
||||
const beforeEnter = (el: any) => {
|
||||
el.style.transition = elTransition;
|
||||
if (!el.dataset) el.dataset = {};
|
||||
el.dataset.oldPaddingTop = el.style.paddingTop;
|
||||
el.dataset.oldPaddingBottom = el.style.paddingBottom;
|
||||
el.style.height = 0;
|
||||
el.style.paddingTop = 0;
|
||||
el.style.paddingBottom = 0;
|
||||
};
|
||||
export interface LayTransitionProps {
|
||||
type?: string
|
||||
}
|
||||
|
||||
const enter = (el: any) => {
|
||||
el.dataset.oldOverflow = el.style.overflow;
|
||||
if (el.scrollHeight !== 0) {
|
||||
el.style.height = el.scrollHeight + "px";
|
||||
el.style.paddingTop = el.dataset.oldPaddingTop;
|
||||
el.style.paddingBottom = el.dataset.oldPaddingBottom;
|
||||
} else {
|
||||
el.style.height = "";
|
||||
el.style.paddingTop = el.dataset.oldPaddingTop;
|
||||
el.style.paddingBottom = el.dataset.oldPaddingBottom;
|
||||
}
|
||||
el.style.overflow = "hidden";
|
||||
};
|
||||
|
||||
const afterEnter = (el: any) => {
|
||||
el.style.transition = "";
|
||||
el.style.height = "";
|
||||
el.style.overflow = el.dataset.oldOverflow;
|
||||
};
|
||||
|
||||
const beforeLeave = (el: any) => {
|
||||
if (!el.dataset) el.dataset = {};
|
||||
el.dataset.oldPaddingTop = el.style.paddingTop;
|
||||
el.dataset.oldPaddingBottom = el.style.paddingBottom;
|
||||
el.dataset.oldOverflow = el.style.overflow;
|
||||
var computedStyle = getComputedStyle(el, null);
|
||||
el.style.height =
|
||||
el.scrollHeight -
|
||||
parseInt(computedStyle.paddingTop) -
|
||||
parseInt(computedStyle.paddingBottom) +
|
||||
"px";
|
||||
el.style.overflow = "hidden";
|
||||
};
|
||||
|
||||
const leave = (el: any) => {
|
||||
if (el.scrollHeight !== 0) {
|
||||
el.style.transition = elTransition;
|
||||
el.style.height = 0;
|
||||
el.style.paddingTop = 0;
|
||||
el.style.paddingBottom = 0;
|
||||
}
|
||||
};
|
||||
|
||||
const afterLeave = (el: any) => {
|
||||
el.style.transition = "";
|
||||
el.style.height = "";
|
||||
el.style.overflow = el.dataset.oldOverflow;
|
||||
el.style.paddingTop = el.dataset.oldPaddingTop;
|
||||
el.style.paddingBottom = el.dataset.oldPaddingBottom;
|
||||
};
|
||||
const props = withDefaults(defineProps<LayTransitionProps>(), {
|
||||
type: 'collapse',
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
export default {
|
||||
name: "LayTree",
|
||||
};
|
||||
|
||||
// import { TreeEmits, TreeProps as Tp } from './tree.type'
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import TreeNode from "./TreeNode.vue";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user