el-transition icon indicating copy to clipboard operation
el-transition copied to clipboard

Handle overlap between initial classes and transition classes

Open tomclose opened this issue 4 years ago • 2 comments

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:

  1. 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.
  2. Run the transition as normal
  3. Then add back in the stashed classes

tomclose avatar Jan 07 '21 10:01 tomclose

Hey, thanks for this. This looks pretty good let me play with it.

mmccall10 avatar Jun 05 '21 16:06 mmccall10

@tomclose can you please remove the .vscode/settings.json file?

mmccall10 avatar Jun 07 '21 05:06 mmccall10