使用 Jquery 或 Javascript 手动触发动画

Question

我有一个警告/错误消息 div，显示我的网站中的错误

.flash {
  height: 75px;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10;
  background-color: #ffffff;
  box-shadow: 0 0 30px 2px #dddddd;
  -webkit-animation: flash-show 300ms ease 0s;
  animation: flash-show 300ms ease 0s;
  &.hide {
    -webkit-animation: flash-hide 5ms ease 0s;
    animation: flash-hide 5ms ease 0s;
    right: -100%;
    opacity: 0;
  }
  .color {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 5px solid #3498db;
    border-radius: 100%;
    margin: 25px;
    &.green {
      border-color: #2ecc71;
    }
    &.red {
      border-color: #e74c3c;
    }
  }
  .text {
    display: inline-block;
    line-height: 75px;
    vertical-align: top;
    margin-right: 100px;
    font-family: "Roboto";
    font-size: 0.9em;
    font-weight: 300;
    color: rgba(25, 25, 25, 0.75);
  }
  .close {
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    &:hover span {
      &:before, &:after {
        background-color: rgba(25, 25, 25, 0.25);
      }
    }
    span {
      width: 16px;
      height: 16px;
      position: relative;
      &:before, &:after {
        content: "";
        width: 16px;
        height: 2px;
        background-color: rgba(25, 25, 25, 0.5);
        transition: all 200ms ease;
        position: absolute;
        top: 7px;
      }
      &:before {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
      }
      &:after {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }
    }
  }
}

@-webkit-keyframes flash-show {
  0% {
    right: -100%;
    opacity: 0;
  }

  100% {
    right: 20px;
    opacity: 1;
  }
}


@keyframes flash-show {
  0% {
    right: -100%;
    opacity: 0;
  }

  100% {
    right: 20px;
    opacity: 1;
  }
}


@-webkit-keyframes flash-hide {
  0% {
    right: 20px;
    opacity: 1;
  }

  100% {
    right: -100%;
    opacity: 0;
  }
}


@keyframes flash-hide {
  0% {
    right: 20px;
    opacity: 1;
  }

  100% {
    right: -100%;
    opacity: 0;
  }
}

我使用这个 div 在页面加载时填充我的 flash 错误或成功消息。到目前为止，这一直运行良好。但是，我想从这个类中获得更多用途，并在按钮单击时手动触发它。

我尝试在 ID 为 message 的 div 上添加和删除类名

我有内部按钮点击事件：

  $("#message").addClass("flash")

 $("#message").removeClass("flash")

但是，这不起作用。有没有办法使用 javascript 或 jquery 触发/重新触发 CSS 动画？

Answer 1

请使用fadeIn 和fadeOut 而不是CSS 动画。