el-transition
el-transition copied to clipboard
Handle overlap between initial classes and transition classes
This work represents the changes needed to allow for more complicated element transitions. For example, transitioning from opacity-0
to opacity-50
:
<!-- simplified example -->
<button class="hidden bg-black opacity-50"
data-transition-enter="transition ease-out duration-100"
data-transition-enter-start="opacity-0"
data-transition-enter-end="opacity-50"
data-transition-leave="transition ease-in duration-75"
data-transition-leave-start="opacity-50"
data-transition-leave-end="opacity-0"
></button
I first tried to use @jduff's PR (#2), but that didn't work in this case, as it isn't enough to not-remove the opacity-50
at the end, you also have to make sure it isn't there throughout the transition, as if it is it overrides the opacity-0
.
This PR implements a more general way of dealing with overlap between transition classes and initial classes, which should work in every case:
- Before the start of the transition calculate any intersection between the transition classes and the initial classes, and remove them from the class list (some will be immediately added back in). We'll call these the stashed classes.
- Run the transition as normal
- Then add back in the stashed classes
Hey, thanks for this. This looks pretty good let me play with it.
@tomclose can you please remove the .vscode/settings.json file?