У меня проблемы с переходами vue, может, некоторые из вас могут мне помочь ?!Я хочу понять, что это простой, легкий компонент свертывания, использующий vue переходы.
Поэтому в моем текущем подходе каждый раз, когда коллапс сворачивается, его высота должна быть установлена в contentHeight, а затем сразу после этого0 (а также наоборот при расширении).Или говорить в JavaScript-хуках vue transition:
- before-enter: установить высоту на
0 - enter: установить height на
contentHeight - after-введите: установите высоту
auto - перед выходом: установите высоту
contentHeight - оставьте: установите высоту
0
Этотекущий подход:
<template>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
>
<div
v-if="isCollapsed === false"
:style="componentStyles"
class="UiCollapse"
>
<div
ref="content"
class="UiCollapse-content"
>
<slot/>
</div>
</div>
</transition>
</template>
<script>
export default {
name: "UiCollapse",
props: {
isCollapsed: {
type: Boolean,
default: false
}
},
data() {
return {
componentStyles: {
height: undefined
}
};
},
methods: {
beforeEnter() {
this.setHeight(0);
},
enter() {
this.setHeight(this.getContentHeight());
},
afterEnter() {
this.setHeight(undefined);
},
beforeLeave() {
this.setHeight(this.getContentHeight());
},
leave() {
this.setHeight(0);
},
afterLeave() {
this.setHeight(0);
},
setHeight(height) {
this.componentStyles.height = height;
},
getContentHeight() {
return this.$refs.content.scrollHeight + "px";
}
}
};
</script>
<style scoped>
.UiCollapse {
display: block;
height: auto;
overflow: hidden;
}
.UiCollapse.v-enter-active,
.UiCollapse.v-leave-active {
transition: height 0.3s ease;
}
.UiCollapse-content {
display: block;
}
</style>
При таком подходе следует учитывать динамические высоты содержимого и изменения содержимого, влияющие на его высоту.
Я также перенес это в коды и поле: https://codesandbox.io/s/yq1nw51yq9
То, что я ожидал бы здесь, было плавным открытием и закрытием перехода (как определено в css), но, как вы можете видеть в этом проекте, это работает только частично, и я не понимаю, почему.У кого-нибудь из вас есть идеи?
Может быть, это не правильный подход, я открыт для альтернативных подходов или уже существующих библиотек (хотя я бы предпочел понять здесь переходы vue), но решения, которые яДо сих пор было обнаружено, что используются фиксированные значения для max-height или другие обходные пути, которые я бы хотел избежать.
Заранее благодарен за помощь!