Question

我有一个div，我想在过渡时使用背景色，并且在背景色消失时也应应用过渡。

我正在维护state来决定何时使用背景色以及何时删除背景色。我希望此背景色可以顺利进入和离开。如何在CSS中做到这一点？现在背景色来来去去，没有任何过渡效果。

我的代码

 <div className='current_code_div'>
   <div style={{backgroundColor: setInviteCodeStatus === 'success' ? '#b4c067':'transparent'}}>
   </div>
 </div>

CSS

.current_code_div {    
  width: auto;
  display: table;
  overflow: hidden;
  -webkit-transition: background-color 1s;
  -moz-transition: background-color 1s;
  -ms-transition: background-color 1s;
  background-color: transparent;
  position: relative;
  border-radius: 4px;
}

Answer 1

您可以通过css进行操作，请在css下方添加要通过鼠标输入更改背景色的div。

transition:0.5s all;
transition-timing-function:cubic-bezier(.66,.22,.73,1.43);

Answer 2

尝试一下：

<div className='current_code_div'>
      <div style={{backgroundColor: setInviteCodeStatus === 'success' ? '#b4c067':'transparent', transition: 'background-color 0.5s ease'}}>

      </div>
 </div>

进入和离开时reactjs背景颜色过渡

2 个答案: