使用css 3 translate3d 做元素互动滑出动画

1.元素的display 属性的由none 转变为block时，会触发translate3d 动画效果的重新加载；
2.translate3d (x,y,z)；x,y,z 分别带表水平垂直和z轴的位移
3. cubic-bezier 是一个描述动画加载曲线的函数，具体可以参照：http://cubic-bezier.com/#.17,.67,.83,.67

// css 样式
.div{
  margin:200px auto;
  width:150px;
  height:100px;
  background:skyblue;
  animation: animations 1s cubic-bezier(0.215, 0.610, 0.355, 1.000)
}

@keyframes animations {
  0% {
    opacity: 0;
    transform: translate3d(-440px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  100% {
    transform: none;
  }
}

body //内容
  var div = document.getElementsByClassName('div')[0];
  var btn  = document.getElementsByClassName("btn")[0];

  var status  = 1
  function toggle(){
    if(status%2==0){
        div.style.display = "block"
        console.log(status)
    }else{
        div.style.display = "none"
        // console.log(status)
    }
    status = parseInt(status)+1
    
  }
  btn.onclick = function(){
      toggle()
  }