html - 隐藏第二个元素,直到第一个元素完成动画 - CSS 关键帧
问题描述
我试图让第二个元素在第一个元素完成动画之前根本不显示在屏幕上。到目前为止,我已经尝试过:
@keyframes slideInFromRight {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
.announcements-container {
position: fixed;
top: 80px;
right: 20px;
z-index: 1001;
display: flex;
flex-direction: column;
width: 300px;
}
.announcements-1 {
animation: 0.4s ease-out 0s 1 slideInFromRight;
}
.announcements-2 {
margin-top: 15px;
/* opacity: 0; */
/* display: none; */
/* animation-fill-mode: both; */
animation: 0.4s ease-out 0s 1 slideInFromRight;
animation-delay: 0.4s;
}
.annoucements-header {
background-color: #1481C3;
color: #ffffff;
font-family: "Proxima Nova Bold";
padding: 7px 10px;
}
.annoucements-close {
position: absolute;
right: 5px;
width: 24px;
height: 36px;
cursor: pointer;
opacity: .85;
}
.annoucements-close:hover {
opacity: 1;
}
.annoucements-close::before,
.annoucements-close::after {
content: '';
width: 24px;
height: 2px;
background: white;
position: absolute;
top: 7px;
left: 0;
}
.annoucements-close::before {
transform: rotate(-45deg);
}
.annoucements-close::after {
transform: rotate(45deg);
}
<body>
<div class="announcements-container">
<div class="announcements-1">
<div class="annoucements-header">
<span class="annoucement-type-quantity">2 School Announcements</span>
<i class="annoucements-close"></i>
</div>
</div>
<div class="announcements-2">
<div class="annoucements-header">
<span class="annoucement-type-quantity">1 Admin Annoucement</span>
<i class="annoucements-close"></i>
</div>
</div>
</div>
</body>
但是正如你所看到的,当第一个 div 从右侧滑入时,第二个 div 仍然显示。我尝试添加animation-delay
, transition-delay
,将延迟值更改为0.4
in the line animation: 0.4s ease-out 0.4s 1 slideInFromRight;
,或者完全添加一个新的 keframe:
@keyframes slideInFromRight {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@keyframes slideInFromRight2 {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
.announcements-container {
position: fixed;
top: 80px;
right: 20px;
z-index: 1001;
display: flex;
flex-direction: column;
width: 300px;
}
.announcements-1 {
animation: 0.4s ease-out 0s 1 slideInFromRight;
}
.announcements-2 {
margin-top: 15px;
/* opacity: 0; */
/* display: none; */
/* animation-fill-mode: both; */
-webkit-animation: slideInFromRight2 0.4s ease-out 1s 1 normal;
-moz-animation: slideInFromRight2 0.4ss ease-out 1s 1 normal;
-o-animation: slideInFromRight2 0.4s ease-out 1s 1 normal;
animation: slideInFromRight2 0.4s ease-out 1s 1 normal;
}
.annoucements-header {
background-color: #1481C3;
color: #ffffff;
font-family: "Proxima Nova Bold";
padding: 7px 10px;
}
.annoucements-close {
position: absolute;
right: 5px;
width: 24px;
height: 36px;
cursor: pointer;
opacity: .85;
}
.annoucements-close:hover {
opacity: 1;
}
.annoucements-close::before,
.annoucements-close::after {
content: '';
width: 24px;
height: 2px;
background: white;
position: absolute;
top: 7px;
left: 0;
}
.annoucements-close::before {
transform: rotate(-45deg);
}
.annoucements-close::after {
transform: rotate(45deg);
}
<body>
<div class="announcements-container">
<div class="announcements-1">
<div class="annoucements-header">
<span class="annoucement-type-quantity">2 School Announcements</span>
<i class="annoucements-close"></i>
</div>
</div>
<div class="announcements-2">
<div class="annoucements-header">
<span class="annoucement-type-quantity">1 Admin Annoucement</span>
<i class="annoucements-close"></i>
</div>
</div>
</div>
</body>
但它仍然出现在第一个动画中。有没有办法让元素消失,直到它“轮到”走?可以完全使用 CSS 来做到这一点,还是需要 JavaScript?
解决方案
这个问题有纯 CSS 方法,方法是最初对每个要设置动画的元素,给一个opacity: 0
然后在@keyframes
动画中,在动画开始时将其不透明度设置为 1。然后动画看起来像:
@keyframes slideInFromRight {
0% {
transform: translateX(100%);
}
.1%{
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
并为你想要动画添加opacity: 0
到你的CSS中的每个元素也不要忘记使用animation-fill-mode: forwards
推荐阅读
- ios - 按标准阻止呼叫 (CallKit)
- javascript - reactjs-popup 没有正确改变状态
- java - 来自一个队列的多个侦听器 RabbitMQ Spring
- delphi - SetThreadDesktop:ERROR_INVALID_HANDLE
- ruby - Ruby 邮件库 如何获取错误报告
- python - Python“如果不存在,那么……”逻辑?
- reporting-services - 封面页上的背景图像在 SSRS 中失真
- numpy - 在python中加速欧几里得距离
- jquery - 如何在第一次单击时选中复选框
- c# - ListBox 的 Refresh 方法不会触发 DrawItem 属性的事件处理程序