使用Jquery或Javascript手动触发动画

我有一个警告/错误消息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为

消息的div上添加和删除类名

我的内部按钮点击事件：

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

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

---

然而，这是行不通的。有没有一种方法可以使用javascript或jquery触发/重新触发CSS动画？

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

可能的重复可以帮助，只需提供HTML/jquery现有代码/Attempts您可以在按钮中添加属性，如

data flash target=“message”

。然后，您可以使用

data flash target

属性以

#message

元素为目标，并在按钮单击事件上切换

flash

类。