Is it possible to only half-collapse an element?

[Arturexe]

Hi, I'm looking for a way to circumvent the CSS transition height-auto dilemma, which prevents proper CSS transitions when the height of a DOM element is unknown. With your library I've only managed to show either 0% height (hidden) or 100% height of a DOM element. Is there any way to show, let's say height: 40vh in the collapsed state and upon click expand it to 100%?

[smastrom-dolly]

Hi @Arturexe, I just released vue-collapsed v1.1.0 which includes a new prop named baseHeight that addresses exactly this question.

In short, it lets you specifiy the collapsed height in pixels (defaults to 0).

If you must rely on the viewport size rather than pixels, you can use the composable useWindowSize from VueUse along with baseHeight:

<script setup>
import { ref, computed } from 'vue';
import { useWindowSize } from '@vueuse/core';
import { Collapse } from 'vue-collapsed';

const { height } = useWindowSize();
const desiredHeight = computed(() => height.value * 0.4); // 40vh

const isExpanded = ref(false);

function handleCollapse() {
  isExpanded.value = !isExpanded.value;
}
</script>

<template>
  <button @click="handleCollapse">Toggle</button>
  <Collapse :when="isExpanded" class="Collapse" :baseHeight="desiredHeight">
    <div class="Inner" />
  </Collapse>
</template>

<style>
.Collapse {
  transition: height var(--vc-auto-duration) cubic-bezier(0.3, 0, 0.6, 1);
}

.Inner {
  height: 100vh; /* You may rely on your content (auto), using 100vh for the sake of the example */
  background: #34ebff;
}
</style>

You can also check the example on the demo website.

I wish you a nice weekend,

Simone