lorado

This gist contains different implementations of TransitionExpand found for Vue2 here. Feel free to read his article also, to get idea how he got to the result.

• TransitionExpandOriginal.vue contains original code ported to Vue3. Before hide element it applies same width, setting position absolute with hidden visbility. Doing so DOM element is rendered invisibly, so that its possible to get the element height.
• TransitionExpandAlternative.vue on the other side uses elemnts scrollHeight as the final target height. This approach was ispired by vue3-slude-up-down. I like this one more, as it has much less lines and less operations.
• TransitionExpandTailwind.vue the last implementation is based on the Alternative solution, while using tailwind instead of custom wr

lorado

<script setup lang="ts">
const emit = defineEmits<{
  (e: "open-start"): void;
  (e: "close-start"): void;
  (e: "open-end"): void;
  (e: "close-end"): void;
}>();

const props = withDefaults(
  defineProps<{

lorado

Keybase proof

I hereby claim:

• I am lorado on github.
• I am lorado (https://keybase.io/lorado) on keybase.
• I have a public key ASDAeEqIXR6kN5jZV93iqXbSi_kWKGlS1sFHz5hmaZ2bIgo

To claim this, I am signing this object:

lorado

<?php

namespace App\GraphQL\Scalars;

use GraphQL\Type\Definition\ScalarType;
use GraphQL\Language\AST\BooleanValueNode;
use GraphQL\Language\AST\FloatValueNode;
use GraphQL\Language\AST\IntValueNode;
use GraphQL\Language\AST\ListValueNode;
use GraphQL\Language\AST\ObjectValueNode;