使用 Jquery 或 Javascript 手动触发 animation

Question

I have an alert/error message div that shows errors in my website

.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;
  }
}

I use this div to populate my flash error or success message on page load. This has been working perfectly till now. However, I wanted to get more use out of this class and trigger it manually on button click instead.

I tried adding and removing the class name on a div with an id message

Inside button click event I had:

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

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

However, this does not work. Is there a way to trigger/retrigger the CSS animation using javascript or jquery?

Answer 1

Please use fadeIn and fadeOut instead of CSS animation.