2

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

每次我点击like按钮时，它都会增加数字，我想改变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;
 }

我也愿意接受有关其他性能友好的反应动画工具的建议。

4

2 回答 2

3

我看到 Sebastian 已经为使用 css 样式和悬停伪元素提供了答案。不过，您似乎确实希望它在单击时发生。

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

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

请参阅此处的代码笔https://codepen.io/bluesixty/pen/gGzbrj?editors=0111。

注意：事件监听器的回调中的 codepen 有一些愚蠢的地方。Codepen 不会调用 animatingDone 将状态更改回 false。（我在本地测试过，它工作正常）。只需刷新窗口即可将其重置。

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)}
}

这个怎么运作

  • 单击按钮将动画状态设置为 true
  • React 响应状态变化，将animate-pulse类添加到 svg 元素中
  • eventlistener 等待动画结束并调用将动画状态设置回 false。
  • react 响应状态变化并移除animate-pulse类
于 2017-10-09T20:56:26.693 回答
2

你可以试试 vanilla 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 类。

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

于 2017-10-09T20:27:07.247 回答