Open Matix-Media opened 1 year ago
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. :)
Thank you for your fast reply. I can make it work without the delay. 👍
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
Environment
Additional context
Question: Is it required to call app.use even when using the components via import?
Possible solution
No response