为什么我的css转换属性不是基于转换持续时间逐渐发生的

Question

所以我有两个称为左面板和右面板的框，以及一个位置为：绝对在右面板顶部的覆盖。在右侧面板上有一个注册按钮，点击后我添加了一个noghost类(这样覆盖就可以看到了(。

我想要的是，当我点击右侧面板上的按钮时，覆盖层应该向左平移X。我注意到的是，每当这门课一上来，它就会立即发生。我做错了什么

Html

.overlay {
height: 100%;
width: 50%;
position: absolute;
left: 50%;
background: yellow;
top: 0%;
opacity: 0.7;
transition: all 1.8s linear;
z-index: 10;
}
.trigger.noghost .overlay{

transform: translateX(-250px);
}

<div
className={`trigger ${
activePanel === 'SignIn' ? 'noghost' : 'ghost'
}` }    
>
<div className="overlay" />
</div>

Answer 1

我解决问题的方法是添加了一个默认位置，就像您的情况一样：

transform: translateX(0);

这也是为了帮助您了解元素中正在更改的属性。

JSFiddle

代码沙盒