.animate-hack{
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}

//对话框
.modal-enter-active, .modal-leave-active {

//  transform: translate(-50%, -50%) !important;
  transition: opacity .3s ease-out, transform .3s ease-out;

}
.modal-enter, .modal-leave-active {
  transform: scale(1.2);
  opacity: 0;
}

//从左侧进入100%
.lr-enter-active, .lr-leave-active {
//  transform: translate(-50%, -50%) !important;
  transition: transform .3s ease-out;

}
.lr-enter, .lr-leave-active {
  transform: translate3d(-100%, 0, 0);
}

//从下方进入100%
.bt-enter-active, .bt-leave-active {
//  transform: translate(-50%, -50%) !important;
  transition: transform .3s ease-out;
}
.bt-enter, .bt-leave-active {
  transform: translate3d(0, 100%, 0);
}

//从上方进入100%
.tb-enter-active, .tb-leave-active {
//  transform: translate(-50%, -50%) !important;
  transition: transform .3s ease-out;
}
.tb-enter, .tb-leave-active {
  transform: translate3d(0, -100%, 0);
}

//遮罩层
.layout-enter-active, .layout-leave-active {
  transition: opacity .2s;
}
.layout-enter, .layout-leave-active {
  opacity: 0;
}

//移动端页面主体移动
.pagein-enter-active, .pagein-leave-active {
  transition: transform .3s;
}
.pagein-leave ,.pagein-enter, .pagein-leave-active{
  position: absolute;
  left:0;
  width:100%;
}
.pagein-enter{
  transform: translate3d(100%, 0, 0);
}
.pagein-leave-active {
  transform: translate3d(-100%, 0, 0);
}



//
.loading{
  animation:loading 2s linear infinite;
}
//
@keyframes loading{
　from {transform:rotate(0deg)}
　to {transform:rotate(360deg)}
}

//
.jump{
  animation:jump .6s ease;
}
//
@keyframes jump{

  40% {transform:translate(0, -40px)}
  80% {transform:translate(0, 8px)}
　to {transform:translate(0 , 0)}
}