如何解决为什么我的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>
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。