Fixed turbo_stream animation hook and added some URL source

app/javascript/controllers/application.js

@@ -8,9 +8,23 @@ window.Stimulus   = application
 
 export { application }
 
+// Transition for turbo_frames
+// URL: https://dev.to/nejremeslnici/how-to-use-view-transitions-in-hotwire-turbo-1kdi
+// Alternative turbo_stream URL: https://evilmartians.com/chronicles/the-future-of-full-stack-rails-turbo-view-transitions
+addEventListener("turbo:before-frame-render", (event) => {
+  if (document.startViewTransition) {
+    const originalRender = event.detail.render
+    event.detail.render = (currentElement, newElement) => {
+      document.startViewTransition(()=> originalRender(currentElement, newElement))
+    }
+  }
+})
+
 // URL: https://edforshaw.co.uk/hotwire-turbo-stream-animations
-// FIXME: data-stream-exit-class not working..
-document.addEventListener("turbo:before-stream-render", function(event) {
+// Alternative Hotwire Animate (Wrapper for Animate.css)
+// URL: https://railshackathon.com/entries/12 https://yozu.co.uk/tech-blog-turbocharged-animations-introducing-hotwire-animate/
+// Discussion about hotwire animation: https://discuss.hotwired.dev/t/are-transitions-and-animations-on-hotwire-roadmap/1547/10
+document.addEventListener("turbo:before-stream-render", (event) => {
     // Add a class to an element we are about to add to the page
     // as defined by its "data-stream-enter-class"
     if (event.target.firstElementChild instanceof HTMLTemplateElement) {
@@ -22,17 +36,18 @@ document.addEventListener("turbo:before-stream-render", function(event) {
   
     // Add a class to an element we are about to remove from the page
     // as defined by its "data-stream-exit-class"
-//    var elementToRemove = document.getElementById(event.target.target)
-//    if (elementToRemove) {
-//      var streamExitClass = elementToRemove.dataset.streamExitClass
-//      if (streamExitClass) {
-//        // Intercept the removal of the element
-//        event.preventDefault()
-//        elementToRemove.classList.add(streamExitClass)
-//        // Wait for its animation to end before removing the element
-//        elementToRemove.addEventListener("animationend", function() {
-//          event.target.performAction()
-//        })
-//      }
-//    }
+   var elementToRemove = document.getElementById(event.target.target)
+   if (elementToRemove) {
+     var streamExitClass = elementToRemove.dataset.streamExitClass
+     if (streamExitClass) {
+       // Intercept the removal of the element
+       event.preventDefault()
+       elementToRemove.classList.remove(elementToRemove.dataset.streamEnterClass)
+       elementToRemove.classList.add(streamExitClass)
+       // Wait for its animation to end before removing the element
+       elementToRemove.addEventListener("animationend", function() {
+         event.target.performAction()
+       })
+     }
+   }
   })

app/views/jobs/_job_tr.html.erb

@@ -1,4 +1,4 @@
-<tr id="<%= dom_id job %>" class="bg-status-<%= job.status %>-light odd:bg-opacity-20 even:bg-opacity-15 text-hsrm-gray whitespace-nowrap hover:bg-opacity-30" data-stream-enter-class="animate-flash-increase" data-stram-exit-class="animate-job-item-out">
+<tr id="<%= dom_id job %>" class="bg-status-<%= job.status %>-light odd:bg-opacity-20 even:bg-opacity-15 text-hsrm-gray whitespace-nowrap hover:bg-opacity-30" data-stream-enter-class="animate-flash-increase">
   <td class="p-2 py-3 text-center">
     <span class="badge badge-xl text-status-<%= job.status %> bg-status-<%= job.status %>-light rounded-lg shadow">
       <%= job.id %>

app/views/operator/jobs/_job_tr.html.erb

@@ -1,4 +1,4 @@
-<tr id="<%= dom_id job %>" class="bg-status-<%= job.status %>-light odd:bg-opacity-20 even:bg-opacity-10 text-hsrm-gray whitespace-nowrap hover:bg-opacity-30" data-stream-enter-class="animate-flash-increase" data-stream-exit-class="animate-fade-out">
+<tr id="<%= dom_id job %>" class="bg-status-<%= job.status %>-light odd:bg-opacity-20 even:bg-opacity-10 text-hsrm-gray whitespace-nowrap hover:bg-opacity-30" data-stream-enter-class="animate-job-in">
   <td class="p-2 py-3 text-center">
     <%= link_to operator_job_path(job) do %>
       <span class="badge badge-xl text-status-<%= job.status %> bg-status-<%= job.status %>-light">