我正在使用React构建一个简单的应用程序。我试图在点击喜欢按钮时更改svg
每次我点击喜欢按钮时,它都会递增数字,我想在这样做时更改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动画工具的建议。
button:focus #Layer_1
——我在codepen中尝试过,它本身可以正常工作...) - Sebastian Rothbucher