From 3a929dbedd31ea67723746bdf387e22e66e247cd Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Thu, 24 Oct 2019 22:47:48 +0200
Subject: [PATCH] Replace fav icon animation with CSS (#12175)
Fixes #12151
---
.../mastodon/components/icon_button.js | 84 +++++++++----------
.../styles/mastodon/components.scss | 58 +++++++++++++
2 files changed, 96 insertions(+), 46 deletions(-)
diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js
index 4016750523..fd715bc3c8 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/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 0fe86bf16d..52fe3bed01 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1591,6 +1591,20 @@ a.account__display-name {
color: $gold-star;
}
+.no-reduce-motion .icon-button.star-icon {
+ &.activate {
+ & > .fa-star {
+ animation: spring-rotate-in 1s linear;
+ }
+ }
+
+ &.deactivate {
+ & > .fa-star {
+ animation: spring-rotate-out 1s linear;
+ }
+ }
+}
+
.notification__display-name {
color: inherit;
font-weight: 500;
@@ -3373,6 +3387,50 @@ a.status-card.compact:hover {
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
+@keyframes spring-rotate-in {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 30% {
+ transform: rotate(-484.8deg);
+ }
+
+ 60% {
+ transform: rotate(-316.7deg);
+ }
+
+ 90% {
+ transform: rotate(-375deg);
+ }
+
+ 100% {
+ transform: rotate(-360deg);
+ }
+}
+
+@keyframes spring-rotate-out {
+ 0% {
+ transform: rotate(-360deg);
+ }
+
+ 30% {
+ transform: rotate(124.8deg);
+ }
+
+ 60% {
+ transform: rotate(-43.27deg);
+ }
+
+ 90% {
+ transform: rotate(15deg);
+ }
+
+ 100% {
+ transform: rotate(0deg);
+ }
+}
+
@keyframes loader-figure {
0% {
width: 0;
--
GitLab