如果不给标签主动添加 hoverClass="none" 则在首次显示的时候 过渡效果(transition)为无效

[chengazhen]

相关平台

微信小程序

小程序基础库: 2.15
使用框架: React

复现步骤

 const [isShow, setIsShow] = useState(false);
function inputClick(index = 0) {
    setCurrent(index);
    setIsShow(!isShow);
  }

<View onClick={inputClick}>点我</View>
<View  className={isShow ? ["test", "test-show"].join() : ['test'].join()}></View>

.test {
  position: fixed;
  bottom: 0;
  width: 200px;
  height: 200px;
  background-color: skyblue;
  transform: translateY(100%);
  transition: transform .3s ease-in;
}
.test-show{
  transform: translateY(0);
}

期望结果

期望过渡效果生效,实现弹出框效果

实际结果

首次显示 过渡效果(transition)为无效 之后的行为都是有效的

环境信息

Taro v3.0.28


  Taro CLI 3.0.28 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 12.14.0 - C:\Program Files\nodejs\node.EXE
      npm: 6.14.9 - C:\Program Files\nodejs\npm.CMD   

---

补充信息

业务场景: 实现一个虚拟键盘的弹出唤起效果, 在我主动给标签添加 hoverClass="none" 属性后正常