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仍然存在且没有移动到屏幕外，只是在添加旋转类并完成旋转变换时选择不再加载。

为什么？

- tatsu

Answer 1

尝试在您的img样式中添加-webkit-backface-visibility: hidden;（或只是backface-visibility: hidden;，但似乎只是Chrome的问题）。

- Dyo

---

哇！干得好！嗯...为什么这个有效？而且为什么这一开始就会发生？ - tatsu

浏览器有时会出现奇怪的行为，特别是在CSS动画方面，这个bug可能会被修复，也可能不会！ - Dyo