具有延迟但没有关键帧的react CSS不透明事务

Question

所以我有一个img，它以opacity: 100%开头，我想动态地添加附加另一个类，这样它在2秒内将opacity更改为30%，但有5秒的延迟，这就是我正在做的，但它不起作用。

.opacity_30 {
    opacity: 0.3;
    transition: opacity 2s 5s;
}

下面是完整的React代码：

const logo_classes = classNames('loading-logo', { remove_padding_bottom: !loading, opacity_30: !loading });

<img src={atlas} alt={'atlas logo'} className={logo_classes}/>

.loading-logo {
    width: 60%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 10em;
    image-rendering: -moz-crisp-edges;
    image-rendering:   -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

.opacity_30 {
    opacity: 0.3;
    transition: opacity 2s 5s;
}

.remove_padding_bottom {
    padding-bottom: 0;
    transition: padding-bottom 3s;
}

Answer 1

尝试在触发任何事件(如onClick)时使用状态或钩子来更改(或附加)图像标签的className。

参考此链接，它可能会对您有所帮助：https://reactjs.org/docs/faq-styling.html

Answer 2

您应该将CSS组合到单个类名或选择器中，并指定一个逗号分隔的转换列表。

单独申请

.remove_padding_bottom {
  padding-bottom: 0;
  transition: padding-bottom 3s;
}

.opacity_30 {
  opacity: 0.3;
  transition: opacity 2s 5s;
}

同时应用这两个转换

.opacity_30.remove_padding_bottom {
  padding-bottom: 0;
  opacity: 0.3;
  transition: opacity 2s 5s, padding-bottom 3s;
}

​

​