javascript - React 16 图像在旋转后消失

Question

如果我在 React 16 中使用 CSS 旋转图像，图像就会消失。

在 fiddle 中，代码有效:

http://jsfiddle.net/dmofoxb3/

重现步骤:

(在 powershell 或 cmd 中)

npm install -g create-react-app
create-react-app my-app
npm start

添加上面代码的一个变体(我想要它在点击时):

import React, { Component } from 'react';
import logo from '../../../img/logo.png';
import menu from '../../../img/menu_icon.png';
import './TopBar.css';

class TopBar extends Component {

    constructor(props) {
        super(props);
        this.state = {
            firstMenuLevel: false,
        };
        this.toggleFirstMenuLevel = this.toggleFirstMenuLevel.bind(this);
    }

    toggleFirstMenuLevel(){
        this.setState({
            firstMenuLevel: !this.state.firstMenuLevel,
        });
        console.log(this.firstMenuLevel);
    }

    render() {
        const {firstMenuLevel} =  this.state;
        return (
            <div className="TopBar">
                <div><img src={logo} className="logo" alt="Company Logo" /></div>
                <h1 className="TopBar-title">App</h1>
                <div
                    className="menu-icon-container"
                    onClick={this.toggleFirstMenuLevel}
                >
                    <img
                        src={menu}
                        className={firstMenuLevel ? 'menu-icon spin' : 'menu-icon'}
                        alt="Menu Icon" />
                </div>
            </div>
        );
    }
}

export default TopBar;

这是我得到的:

正如您通过 chrome 开发人员工具看到的那样，img 仍然存在并且没有移出屏幕，它只是选择不再加载，同时添加了自旋类并完成了旋转转换。

为什么？

Answer 1

尝试将 -webkit-backface-visibility: hidden; 添加到您的 img 样式(或只是 backface-visibility: hidden; 但这似乎只是一个 chrome 问题)