Is it possible to replace part of the page during morph?

1

Hey, I have something that is not really an issue but bothers me. I have a flash partial like this

<% flash.each do |(flash_type, message)| %>
  <div
    data-controller="autoremove"
    data-action="animationend->autoremove#remove"
    id="flash-message"
    class="animate-appear-then-fade fixed top-10 right-10 max-w-xs z-50 border bg-white border-gray-200 dark:border-gray-600 rounded-xl shadow-lg dark:bg-gray-800 "
    role="alert">
...

The flash is supposed to automatically disappear after 5 seconds or when clicked on X. now, when I’m using morph, if the user performs two actions quickly that trigger a flash message, the content gets replaced but the animation doesn’t “reset” so to say, and the flash will remove itself anyway so the second flash message appears for like 1 second. If I switch to replace, it works as I expect: the first flash gets replaced and the second message stays for the whole duration.

In another place, I have an autosave feature similar to Google Docs, and if I’m using replace, the cursors lose focus after the submission.

I wonder if there is an option like “always replace this part even during morphing” or something like that

2

well, that was actually easy; just sprinkled some Javascript:

addEventListener('turbo:before-morph-element', (event) => {
  const element = event.target

  if (element.id === 'flash-message') {
    element.classList.remove('animate-appear-then-fade')
    // Force a reflow to restart the animation
    void element.offsetWidth
    element.classList.add('animate-appear-then-fade')
  }
})

this resets the animation before morph and it looks like the flash messages gets replaced, exactly how I wanted

1 Like