在 React 中单击按钮后如何为 svg 图片设置动画

Question

我正在用 React 构建一个简单的应用程序。当我点击喜欢按钮时，我正在尝试更改 svg fill 颜色。我研究过很多开发人员使用 React Transition Group 作为一种方式，但我很难理解它在这种情况下是如何工作的。

每次我点击赞按钮，它都会增加数字，我想在它发生时改变 svg 背景的颜色。我已经尝试过这种方式，但它不起作用。我在这里做错了什么？这是代码。

<button onClick={this.props.increment.bind(null,index)}>
        <span>{this.state.portfLikes}</span>
       <CSSTransition
              key="heart"
              classNames="anim"
              timeout={{ enter: 500, exit: 300 }}>
      <span className="like-icon" key="heart-icon"><Like/></span>
       </CSSTransition>
      </button>

喜欢svg作为一个组件。

import React from 'react'

class Like extends React.Component{
    render() {
        return (
            <svg viewBox="0 0 64 64" width="64px"  xmlns="http://www.w3.org/2000/svg">
            <g id="Layer_1"><g><circle cx="32" cy="32" fill="#a3bed7" r="32"/></g><g opacity="0.2"><g><path d="M49.982,31.003c-0.094-5.522-4.574-10.442-10.107-10.442c-3.2,0-6.019,1.674-7.875,4.131     c-1.856-2.457-4.676-4.131-7.875-4.131c-5.533,0-10.012,4.921-10.107,10.442H14c0,0.034,0.007,0.065,0.007,0.099     c0,0.025-0.007,0.049-0.007,0.076c0,0.155,0.038,0.272,0.045,0.421c0.495,14.071,17.813,19.84,17.813,19.84     s17.572-5.762,18.092-19.818C49.959,31.464,50,31.34,50,31.178c0-0.027-0.007-0.052-0.007-0.076c0-0.036,0.007-0.065,0.007-0.099     H49.982z" fill="#231F20"/></g></g><g><g><path d="M49.982,29.003c-0.094-5.522-4.574-10.442-10.107-10.442c-3.2,0-6.019,1.674-7.875,4.131 c-1.856-2.457-4.676-4.131-7.875-4.131c-5.533,0-10.012,4.921-10.107,10.442H14c0,0.034,0.007,0.065,0.007,0.099c0,0.025-0.007,0.049-0.007,0.076c0,0.155,0.038,0.272,0.045,0.421c0.495,14.071,17.813,19.84,17.813,19.84     s17.572-5.762,18.092-19.818C49.959,29.464,50,29.34,50,29.178c0-0.027-0.007-0.052-0.007-0.076c0-0.036,0.007-0.065,0.007-0.099 H49.982z" fill="#f5f5f5"/></g></g></g><g id="Layer_2"/></svg>
            )
    }
}

export default Like

CSS 注意：我选择不透明度作为测试以查看动画是否有效。

.anim-enter {
    opacity: 0.12;

}
.anim-enter.anim-enter-active svg {
   opacity: 0.5;    
   transition: opacity 500ms ease-in;
 }

.anim-exit {
   opacity: 1;
 }

.anim-exit.anim-exit-active {
   opacity: 0.01;
   transition: opacity 300ms ease-in;
 }

我也乐于接受有关其他性能友好的 React 动画工具的建议。

Answer 1

您可以尝试原版 CSS - 请参阅这个带按钮的简化示例：

<button>
  <svg height="20" width="20"><circle cx=10 cy=10 r=8 /></svg>
</button>

本身，它只是一个带圆圈的按钮。我使用 CSS 对其进行格式化：

button circle {
  fill: yellow; 
}

一旦我扩展 CSS 以在 focus 上制作动画，我想我已经实现了您正在寻找的东西

button circle {
  fill: yellow; 
  transition: fill 2s; 
}
button:focus circle {
  fill: green;
}

单击时按钮从黄色变为绿色。除了 focus，您还可以分配 CSS 类。

如果您想直接尝试，我已将完全相同的代码放入代码笔中：https://codepen.io/sebredhh/pen/NaMPoP

Answer 2

我看到塞巴斯蒂安已经提供了使用 css 样式和悬停伪元素的答案。不过，您似乎确实希望它在点击时发生。

CSSTransition 仅当您想要在添加到 DOM 时对元素进行动画处理时才真正需要。如果项目已经存在，您只需使用所有典型的 css 爵士乐来为项目设置动画（过渡和变换）。

这是一个使用 React 生命周期函数添加事件侦听器并在单击按钮时为心脏设置动画的示例。

在此处查看代码笔 https://codepen.io/bluesixty/pen/gGzbrj?editors=0111。

注意：在事件侦听器的回调中，codepen 有点傻。 Codepen 没有调用 animatingDone 将状态改回 false。（我在本地测试过，它工作正常）。只需刷新 window 即可重置它。

Javascript

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      animate: false
    };
  }


  //------------------------------------------------------------------------
  // Handle the click animations
  //------------------------------------------------------------------------
  componentDidMount() {
    const svgToPulse = this.itemToPulse;
    svgToPulse.addEventListener("animationend", this.animatingDone);
  }
  componentWillUnmount() {
    const svgToPulse = this.itemToPulse;
    svgToPulse.removeEventListener("animationend", this.animatingDone);
  }
  animatingDone() {   
    this.setState({ animate: false });
  }
  pulse() {        
    this.setState({ animate: true });
  }

  render() {
    return (
      <div>
        <button onClick={() => this.pulse()}>Clicky</button>
        <svg
          ref={e => {
            this.itemToPulse = e;
          }}
          className={this.state.animate ? " animate-pulse" : ""}
          viewBox="0 0 64 64"
          width="64px"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g id="Layer_1">
            <g>
              <circle cx="32" cy="32" fill="#a3bed7" r="32" />
            </g>
            <g opacity="0.2">
              <g>
                <path
                  d="M49.982,31.003c-0.094-5.522-4.574-10.442-10.107-10.442c-3.2,0-6.019,1.674-7.875,4.131     c-1.856-2.457-4.676-4.131-7.875-4.131c-5.533,0-10.012,4.921-10.107,10.442H14c0,0.034,0.007,0.065,0.007,0.099     c0,0.025-0.007,0.049-0.007,0.076c0,0.155,0.038,0.272,0.045,0.421c0.495,14.071,17.813,19.84,17.813,19.84     s17.572-5.762,18.092-19.818C49.959,31.464,50,31.34,50,31.178c0-0.027-0.007-0.052-0.007-0.076c0-0.036,0.007-0.065,0.007-0.099     H49.982z"
                  fill="#231F20"
                />
              </g>
            </g>
            <g>
              <g>
                <path
                  d="M49.982,29.003c-0.094-5.522-4.574-10.442-10.107-10.442c-3.2,0-6.019,1.674-7.875,4.131 c-1.856-2.457-4.676-4.131-7.875-4.131c-5.533,0-10.012,4.921-10.107,10.442H14c0,0.034,0.007,0.065,0.007,0.099c0,0.025-0.007,0.049-0.007,0.076c0,0.155,0.038,0.272,0.045,0.421c0.495,14.071,17.813,19.84,17.813,19.84     s17.572-5.762,18.092-19.818C49.959,29.464,50,29.34,50,29.178c0-0.027-0.007-0.052-0.007-0.076c0-0.036,0.007-0.065,0.007-0.099 H49.982z"
                  fill="#f5f5f5"
                />
              </g>
            </g>
          </g>
          <g id="Layer_2" />
        </svg>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

和css

.animate-pulse {
  animation: animate-pulse 300ms;
}
@keyframes animate-pulse {
  0% {transform: scale(1.2)}
  50% {transform: scale(1.5)}
  100% {transform: scale(1.2)}
}

工作原理

单击按钮会将 animate 状态设置为 true
React 响应状态变化并且 animate-pulse class 添加到 svg 元素
事件侦听器等待动画结束并进行调用以将 animate 状态设置回 false。
react 响应状态变化并删除 animate-pulse class

在 React 中单击按钮后如何为 svg 图片设置动画

How to animate svg picture after a button click in React

reactjs

animation

svg

react-transition-group