REFACTOR: Use CSS animations for likes (#14809)

app/assets/javascripts/discourse/app/widgets/post-menu.js

@@ -1,39 +1,14 @@
 import { applyDecorators, createWidget } from "discourse/widgets/widget";
-import { next, run } from "@ember/runloop";
+import { later, next } from "@ember/runloop";
 import { Promise } from "rsvp";
 import { formattedReminderTime } from "discourse/lib/bookmark";
 import { h } from "virtual-dom";
-import { isTesting } from "discourse-common/config/environment";
 import showModal from "discourse/lib/show-modal";
 import { smallUserAtts } from "discourse/widgets/actions-summary";
 
 const LIKE_ACTION = 2;
 const VIBRATE_DURATION = 5;
 
-function animateHeart($elem, start, end, complete) {
-  if (isTesting()) {
-    return run(this, complete);
-  }
-
-  $elem
-    .stop()
-    .css("textIndent", start)
-    .animate(
-      { textIndent: end },
-      {
-        complete,
-        step(now) {
-          $(this)
-            .css("transform", "scale(" + now + ")")
-            .addClass("d-liked")
-            .removeClass("d-unliked");
-        },
-        duration: 150,
-      },
-      "linear"
-    );
-}
-
 const _builders = {};
 const _extraButtons = {};
 export let apiExtraButtons = {};
@@ -151,6 +126,9 @@ registerButton("like", (attrs) => {
     icon: attrs.liked ? "d-liked" : "d-unliked",
     className,
     before: "like-count",
+    data: {
+      "post-id": attrs.id,
+    },
   };
 
   // If the user has already liked the post and doesn't have permission
@@ -695,16 +673,16 @@ export default createWidget("post-menu", {
       return this.sendWidgetAction("toggleLike");
     }
 
-    const $heart = $(`[data-post-id=${attrs.id}] .toggle-like .d-icon`);
-    $heart.closest("button").addClass("has-like");
+    const heart = document.querySelector(
+      `.toggle-like[data-post-id="${attrs.id}"] .d-icon`
+    );
+    heart.closest(".toggle-like").classList.add("has-like");
+    heart.classList.add("has-animation");
 
-    const scale = [1.0, 1.5];
     return new Promise((resolve) => {
-      animateHeart($heart, scale[0], scale[1], () => {
-        animateHeart($heart, scale[1], scale[0], () => {
-          this.sendWidgetAction("toggleLike").then(() => resolve());
-        });
-      });
+      later(() => {
+        this.sendWidgetAction("toggleLike").then(() => resolve());
+      }, 400);
     });
   },
 

app/assets/javascripts/discourse/tests/integration/widgets/post-test.js

@@ -241,7 +241,7 @@ discourseModule("Integration | Component | Widget | post", function (hooks) {
       {{mount-widget widget="post-menu" args=args toggleLike=toggleLike}}
     `,
     beforeEach() {
-      const args = { showLike: true, canToggleLike: true };
+      const args = { showLike: true, canToggleLike: true, id: 5 };
       this.set("args", args);
       this.set("toggleLike", () => {
         args.liked = !args.liked;

app/assets/stylesheets/desktop/topic-post.scss

@@ -1,3 +1,15 @@
+@keyframes heartBump {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
 .wrap {
   max-width: $large-width;
 }
@@ -103,6 +115,9 @@ nav.post-controls {
           // Like button after I've liked
           .d-icon {
             color: var(--love);
+            &.has-animation {
+              animation: heartBump 0.4s;
+            }
           }
           &.d-hover {
             background: var(--primary-low);