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

Question

我有一个 div，我想使用带有过渡的背景颜色，并且当背景颜色离开时也应该应用该过渡。

我正在维护一个状态来决定何时使用背景色以及何时移除背景色。我想让这个背景颜色顺利进入和离开。我怎么能在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);