为什么我的CSS过渡属性不会根据过渡持续时间逐渐发生

问题描述

因此，我有两个框，分别称为左侧面板和右侧面板，以及一个带有position：absolute的叠加层，位于右侧面板的顶部。右侧面板上有一个注册按钮，单击时，我正在添加一个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>

解决方法

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

transform: translateX(0);

这还可以帮助您了解元素中哪些属性正在更改。

JSFiddle

CodeSandbox