Question

我正在尝试从页面顶部向下滑动并在top: 100px;处完成一条Flash消息。

我的CSS正确执行，但在动画运行后，它又恢复为top: 0px;。

我需要它保持在100px直到用户关闭它，之后用JS完成。我想用CSS完成幻灯片。

这是我的CSS：

.flash-messages {
  &__wrapper {
    position: absolute;
    width: 40%;
    left: 30%;
    background: rgba(128, 128, 128, 0.85);
    margin: 50px;
    overflow: visible;
    padding: 0;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-name: fadeOut;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-name: fadeOut;

    div p {
      color: white;
      font-size: 25px;
      text-align: center;
    }
  }
}


@-webkit-keyframes fadeOut {
    0%      { -webkit-transform: translateY(0%); }
    100% {-webkit-transform: translateY(100px) }
}

这是HTML：

<div class="flash-messages__wrapper">
    <div class="flash-messages__close"></div>
    <div n:foreach="$flashes as $flash" n:class="flash, $flash->type">
        <p>{$flash->message}</p>
    </div>
</div>

有什么建议吗？

Answer 1

这可能有用。我使用COMPLETED代替top，在完成transform元素后返回原始状态，因此在animation中使用top:100px

.flash-messages__wrapper

.flash-messages__wrapper {
  position: absolute;
  width: 40%;
  left: 30%;
  background: rgba(128, 128, 128, 0.85);
  margin: 50px;
  overflow: visible;
  padding: 0;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-name: fadeOut;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-name: fadeOut;
  top:100px;
}

.flash-messages__wrapper div p {
  color: white;
  font-size: 25px;
  text-align: center;
}

@-webkit-keyframes fadeOut {
  0% {
    top:0;
  }
  100% {
    top:100px;
  }
}

仅使用CSS向下滑动并停止页面加载

1 个答案: