Transitions do not work if the "delay" prop is greater than "duration"

[Matix-Media]

trafficstars

Actual behavior

The Transitions do not play, the component gets rendered 100 ms after all the other components but the transition does not get played (component has attribute appear)

Expected behavior

Play transition on appear

Steps to reproduce

1. Use Vue 3
2. Add transition
3. add appear

Environment

• Device: Desktop
• OS: Windows 11
• Browser: Chrome 111

Additional context

<script setup>
import { TransitionFade } from "@morev/vue-transitions";
</script>
<template>
            <transition-fade appear :delay="5000">
                <img
                    class="logo"
                    src="@/assets/logos/java-edition.webp"
                    alt="Minecraft: Java Edition"
                />
            </transition-fade>
</template>

Question: Is it required to call app.use even when using the components via import?

Possible solution

No response

[MorevM]

Good day @Matix-Media,

First, to answer to your question: no, you can skip the app.use() call and use the transition components via direct import.

Secondly, I can reproduce the problem, the only thing is that happens because of delay property, not appear. You can check that it works as intended in case like

<transition-fade appear :duration="2000">
  <div style="width: 200px; height: 200px; background-color: red;"></div>
</transition-fade>

The problem occurs if the delay property is used and if the delay is greater than (or equal to) the duration.

---

I'm very busy right now, and besides, it's not as easy to solve as it may seem. I'll take a look, but I'm pretty sure it will be in about two or three weeks.

For now, as a workaround, I recommend not to use the delay property and create an explicit trigger:

<template>
  <transition-fade>
    <div v-if="isShown" style="width: 200px; height: 200px; background-color: red;"></div>
  </transition-fade>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { TransitionFade } from '@morev/vue-transitions';

  const isShown = ref(false);
  onMounted(() => {
    setTimeout(() => (isShown.value = true), 5000);
  });
</script>

I'll let you know when the problem is gone. :)

[Matix-Media]

Thank you for your fast reply. I can make it work without the delay. 👍