Question

当用户将鼠标悬停在播放按钮上时，我正在尝试在Play button component（svg）上执行简单的CSS样式动画，以使在上/下鼠标移动时，不透明度逐渐增大和减小。我正在尝试使用OnMouseEnter将样式道具传递给Play button，但是我有一些问题：

onMouseEnter方法未激活（通过console.log测试），并且在传递样式道具时，我不确定如何使用-webkit-transitions进行动画处理，或者是否可以甚至可以使用React。

这是我的“播放”按钮组件：

import React, { Component } from 'react';

class Play extends React.Component {

    static defaultProps = {
            fill: 'white',
            width: '100px',
            height: '100px',
            }

    render() {
        return (
            <svg width={this.props.width} height={this.props.height} viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <title>play</title>
                <defs></defs>
                <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                        <g id="play" transform="translate(-2.000000, -2.000000)" fill={this.props.fill} fillRule="nonzero" opacity="0.8">
                                <g id="Rounded" transform="translate(2.000000, 2.000000)">
                                        <path d="M8.8,13.9 L13.47,10.4 C13.74,10.2 13.74,9.8 13.47,9.6 L8.8,6.1 C8.47,5.85 8,6.09 8,6.5 L8,13.5 C8,13.91 8.47,14.15 8.8,13.9 Z M10,0 C4.48,0 0,4.48 0,10 C0,15.52 4.48,20 10,20 C15.52,20 20,15.52 20,10 C20,4.48 15.52,0 10,0 Z M10,18 C5.59,18 2,14.41 2,10 C2,5.59 5.59,2 10,2 C14.41,2 18,5.59 18,10 C18,14.41 14.41,18 10,18 Z" id="Shape"></path>
                                </g>
                        </g>
                </g>
            </svg>
        )
    }
}

export default (Play);

在这里使用我的“播放”按钮：

import React from 'react';

import { withStyles } from '@material-ui/core/styles';
import Play from '../assets/play.js'

const styles = () => ({
  playContainer: {
    position: 'absolute',
    top: 0, 
    left: 0,
    right: 0, 
    bottom: 0, 
    display: 'flex', 
    alignItems: 'center',
    justifyContent: 'center'
  },
})

const togglePlay = () => {
  console.log('hey')
}

class LandingPage extends React.PureComponent {

  render() {
    const classes = this.props.classes
    const style = {
      background: 'white',
      fill: 'black'
    }
    return (
            <div className={classes.playContainer}>
                    <Play style={style} onMouseEnter={this.togglePlay} />
            </div>
    );
  }
}

export default compose (withStyles(styles))(LandingPage);

如何使用React在SVG组件中为新样式设置动画？

0 个答案: