FEATURE: 🍬 cool transition when expanding lightbox

app/assets/javascripts/discourse/lib/lightbox.js

@@ -16,6 +16,8 @@ Discourse.Lightbox = {
         $e.magnificPopup({
           type: "image",
           closeOnContentClick: false,
+          removalDelay: 300,
+          mainClass: "mfp-zoom-in",
 
           callbacks: {
             open: function() {

app/assets/stylesheets/common/base/magnific-popup.scss

@@ -647,6 +647,44 @@ button {
 }
 
 
+
+.mfp-zoom-in {
+  /* start state */
+  .mfp-content {
+    opacity: 0;
+    transition: all 0.2s ease-in-out;
+    transform: scale(0.8);
+  }
+
+  &.mfp-bg {
+    opacity: 0;
+    transition: all 0.3s ease-out;
+  }
+
+  /* animate in */
+  &.mfp-ready {
+    .mfp-content {
+      opacity: 1;
+      transform: scale(1);
+    }
+    &.mfp-bg {
+      opacity: 0.8;
+    }
+  }
+
+  /* animate out */
+  &.mfp-removing {
+
+    .mfp-content {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+    &.mfp-bg {
+      opacity: 0;
+    }
+  }
+}
+
 .mfp-force-scrollbars {
   &.mfp-wrap {
     overflow-y: auto !important;