Question

如果我在反应16中用CSS旋转我的图像，图像就会消失。

在小提琴中代码有效：

重现的步骤：

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

为什么？

Answer 1

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

旋转后反应16 img消失

1 个答案: