为什么动画名称没有变化？

Question

我想在我的div上创建幻灯片效果，但slideOut动画没有执行。

var a = document.getElementById('box1');

function slide(){
  if(a.className == 'newBox'){
    a.style.animationName = 'slideOut';
    //console.log(a.style.animationName);
  }  else {
    a.setAttribute('class','newBox');  
  }
}

.box, .newBox {
  width: 300px;
  height: 200px;
  text-align: center;
  border: 1px solid black;  
  position: relative;
  overflow: hidden;
}

.newBox:after {
  content: "";
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation-name: slideIn;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

@keyframes slideIn {
  0% {
    transform: translate(100%,0);
  }
  100% {
    transform: translate(0,0);
  } 
}


@keyframes slideOut {
  0% {
    transform: translate(0%,0);
  }
  100% {
    transform: translate(100%,0);
  } 
}

<div id="box1" class="box"  onmouseover="slide()" onmouseleave="slide()"></div>

Answer 1

当您可以使用animation时， JS / jQuery 或transition不需要：

＆＃13;

＆＃13;

.box {
  width: 300px;
  height: 200px;
  text-align: center;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}

.box:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  transition: 1s;
  background-color: rgba(0,0,0,0.1);
} 

.box:hover:after {
  width: 100%;
}

＆＃13;

<div id="box1" class="box"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您没有在css slideOut属性中定义100％的大小写 这里：

@keyframes slideOut {
  0% {
    transform : translate(0%,0) ;
  }