html - 在图像之间切换以避免 "jumping"行为

Question

我试图通过根据条件(真或假)切换自定义复选框图像来模仿复选框的行为。我遇到了一个非常烦人的视觉错误，当我将状态设置为真实或虚假条件时，图像取决于它，并且框在切换之前会执行一些 flickr，这是我的代码:

import React from 'react';
import boxCheckedIcon from '../../../../assets/SmallBoxChecked.svg';
import boxUncheckedIcon from '../../../../assets/SmallBoxUnchecked.svg';


class Example extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            condition: false,
        }
    }


    handleSelect = () => {
        this.setState(prevState => ({
            condition: !prevState.condition
        }));
    }


    renderCheckbox = condition => {
        return condition ? <img
            id="checkedCheck"
            src={boxCheckedIcon}
            alt="checked check box"
        /> : <img
                id="uncheckedCheck"
                src={boxUncheckedIcon}
                alt="unchecked check box"
            />
    };

    render() {
        const { condition } = this.state;

        return (
            <div onClick={() => handleSelect()}>
                {renderCheckbox(condition)}
            </div>
        );
    }
}

知道如何使两个图像之间的过渡更平滑吗？ CSS、React 或其他..

Answer 1

最正确的方法是将您的图像移动到 CSS Sprite 并通过附加类切换它的背景位置

render() {
  const { condition } = this.state;

  return (
    <div
      className={classNames(
        'checkbox__icon',
        condition && 'is-checked',
      )}
      onClick={this.handleSelect}
    />
  );
}

在示例中，我使用了 lib https://www.npmjs.com/package/classnames