From e701ceb033e36a6253a4dd68bbc5b92daa9b132f Mon Sep 17 00:00:00 2001
From: Z <tdxdxoz@gmail.com>
Date: Wed, 1 Jan 2020 16:38:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E4=BA=86=E6=97=A7=E7=9A=84?=
 =?UTF-8?q?=E7=82=B9=E8=B5=9E=E5=8A=A8=E7=94=BB=20=E5=8F=82=E8=80=83?=
 =?UTF-8?q?=EF=BC=9Ahttps://github.com/tootsuite/mastodon/commit/3a929dbed?=
 =?UTF-8?q?d31ea67723746bdf387e22e66e247cd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mastodon/components/icon_button.js        | 84 +++++++++----------
 .../styles/closed-social/global.scss          | 34 +++++++-
 2 files changed, 68 insertions(+), 50 deletions(-)

diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js
index 4016750523..92a60d08c7 100644
--- a/app/javascript/mastodon/components/icon_button.js
+++ b/app/javascript/mastodon/components/icon_button.js
@@ -1,6 +1,4 @@
 import React from 'react';
-import Motion from '../features/ui/util/optional_motion';
-import spring from 'react-motion/lib/spring';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Icon from 'mastodon/components/icon';
@@ -37,6 +35,21 @@ export default class IconButton extends React.PureComponent {
     tabIndex: '0',
   };
 
+  state = {
+    activate: false,
+    deactivate: false,
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (!nextProps.animate) return;
+
+    if (this.props.active && !nextProps.active) {
+      this.setState({ activate: false, deactivate: true });
+    } else if (!this.props.active && nextProps.active) {
+      this.setState({ activate: true, deactivate: false });
+    }
+  }
+
   handleClick = (e) =>  {
     e.preventDefault();
 
@@ -75,7 +88,6 @@ export default class IconButton extends React.PureComponent {
 
     const {
       active,
-      animate,
       className,
       disabled,
       expanded,
@@ -87,57 +99,37 @@ export default class IconButton extends React.PureComponent {
       title,
     } = this.props;
 
+    const {
+      activate,
+      deactivate,
+    } = this.state;
+
     const classes = classNames(className, 'icon-button', {
       active,
       disabled,
       inverted,
+      activate,
+      deactivate,
       overlayed: overlay,
     });
 
-    if (!animate) {
-      // Perf optimization: avoid unnecessary <Motion> components unless
-      // we actually need to animate.
-      return (
-        <button
-          aria-label={title}
-          aria-pressed={pressed}
-          aria-expanded={expanded}
-          title={title}
-          className={classes}
-          onClick={this.handleClick}
-          onMouseDown={this.handleMouseDown}
-          onKeyDown={this.handleKeyDown}
-          onKeyPress={this.handleKeyPress}
-          style={style}
-          tabIndex={tabIndex}
-          disabled={disabled}
-        >
-          <Icon id={icon} fixedWidth aria-hidden='true' />
-        </button>
-      );
-    }
-
     return (
-      <Motion defaultStyle={{ rotate: active ? -360 : 0 }} style={{ rotate: animate ? spring(active ? -360 : 0, { stiffness: 120, damping: 7 }) : 0 }}>
-        {({ rotate }) => (
-          <button
-            aria-label={title}
-            aria-pressed={pressed}
-            aria-expanded={expanded}
-            title={title}
-            className={classes}
-            onClick={this.handleClick}
-            onMouseDown={this.handleMouseDown}
-            onKeyDown={this.handleKeyDown}
-            onKeyPress={this.handleKeyPress}
-            style={style}
-            tabIndex={tabIndex}
-            disabled={disabled}
-          >
-            <Icon id={icon} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' />
-          </button>
-        )}
-      </Motion>
+      <button
+      aria-label={title}
+      aria-pressed={pressed}
+      aria-expanded={expanded}
+      title={title}
+      className={classes}
+      onClick={this.handleClick}
+      onMouseDown={this.handleMouseDown}
+      onKeyDown={this.handleKeyDown}
+      onKeyPress={this.handleKeyPress}
+      style={style}
+      tabIndex={tabIndex}
+      disabled={disabled}
+      >
+      <Icon id={icon} fixedWidth aria-hidden='true' />
+      </button>
     );
   }
 
diff --git a/app/javascript/styles/closed-social/global.scss b/app/javascript/styles/closed-social/global.scss
index 2c0758b9b9..e851c54180 100644
--- a/app/javascript/styles/closed-social/global.scss
+++ b/app/javascript/styles/closed-social/global.scss
@@ -76,8 +76,34 @@ div {
     transform: scale(1);
   }
 }
-.no-reduce-motion .icon-button.active {
-	i.fa-heart {
-			animation: like 1s;
-	}
+
+@keyframes unlike {
+  0% {
+    transform: rotateY(0deg);
+  }
+  50% {
+    transform: rotateY(240deg);
+  }
+  80% {
+    transform: rotateY(140deg);
+  }
+  100% {
+    transform: rotateY(180deg);
+  }
+}
+
+.no-reduce-motion .icon-button.star-icon {
+  &.activate {
+    & > .fa-heart {
+      animation: like 1s linear;
+    }
+  }
+}
+
+.no-reduce-motion .icon-button.star-icon {
+  &.deactivate {
+    & > .fa-heart {
+      animation: unlike 1s linear;
+    }
+  }
 }