I am interested in understanding if and why a specific environment / implementation generates this type of race condition. I chose the implementation shown below after studying these cases:
My Scenario
I am creating a complex transition on a Vue component appearing. The basic idea is to wait for the component to be mounted by using the onMounted lifecycle hook, then, put the various changes in the task queue via setTimeout. This way, the browser will have a chance to render the element with the default style, before applying any new styles.
<script setup>
// ...
onMounted(() => {
setTimeout(() => {
// All style manipulation logic
}, 0);
});
</script>
Here is a DEMO exposing the situation (The logic is fully inside Comp.vue).
This works in my local environment, however it has unexpected behavior in the Vue SFC Playground (where the animation does not occur when the page loads). So I am concerned that this type of approach is tightly bound to the runtime environment and severely affects the reusability of my component.
Transitions ?
Vue uses a built-in component Transition, to predictably manage the effects associated with the appearance of a component. However, in my case, I'd like to have a more imperative approach on my component and that isn't just limited to appearance. Here is an example:
// Inside myComp's parent
onMounted(() => {
myComp.doSomething();
});
The problem here is that the parent can't know whether the rendering or transition has already happened
The most elegant solution I thought of is to expose a Promise inside myComp, which is resolved by a Transition hook on the component appearing. Then await the Promise inside the parent onMounted hook -- would that make sense? Has some drawbacks?