Added turbo_stream animations

app/javascript/controllers/application.js

@@ -7,3 +7,32 @@ application.debug = false
 window.Stimulus   = application
 
 export { application }
+
+// URL: https://edforshaw.co.uk/hotwire-turbo-stream-animations
+// FIXME: data-stream-exit-class not working..
+document.addEventListener("turbo:before-stream-render", function(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) {
+      var enterAnimationClass = event.target.templateContent.firstElementChild.dataset.streamEnterClass
+      if (enterAnimationClass) {
+        event.target.templateElement.content.firstElementChild.classList.add(enterAnimationClass)
+      }
+    }
+  
+    // 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()
+        })
+      }
+    }
+  })