
@mixin fade-in-out($name) {
  .#{$name}-enter-active {
    transition: all .3s ease;
  }
  .#{$name}-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .#{$name}-fade-enter, .#{$name}-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }
}

.roll-enter {
  opacity: 0;
  transform: translateY(30px);
}

.roll-leave-to {
  opacity: 0;
  transform: translateY(-30px)
}

.roll-enter-active,
.roll-leave-active {
  transition: all 0.6s ease;
}

.hor-scroll-enter {
  // position: absolute;
  transform: translateX(100px)
}
.hor-scroll-leave-to {
  // opacity: 0;
  // position: absolute;
  transform: translateX(-100px)
}

.hor-scroll-enter-active,
.hor-scroll-leave-active {
  // position: absolute;
  transition: all 1s ease-out;
}

.common-enter {
  // position: absolute;
  transform: translateX(100px)
}
.common-leave-to {
  // opacity: 0;
  // position: absolute;
  transform: translateX(100px)
}

.common-enter-active,
.common-leave-active {
  // position: absolute;
  opacity: 0;
  transition: all 1s ease-out;
}


// dowm
.slide-down-enter-active { transition: all .4s ease;}
.slide-down-leave-active { transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0);}
.slide-down-enter, .slide-down-leave-active { transform: translateY(20px); opacity: 0;}
.slide-down-move { transition: all .4s;}
.slide-down-leave-active { position: absolute !important; width: 100%;}

// up
.slide-up-enter-active { transition: all .5s ease .3s;}
.slide-up-leave-active { transition: all .5s ease;}
.slide-up-enter, .slide-up-leave-active{ transform: translateY(-20px); opacity: 0;}
.slide-up-move { transition: all .5s; }

// left
.slide-left-enter-active { transition: all .5s ease;}
.slide-left-leave-active { transition: all .5s cubic-bezier(.55,0,.1,1);}
.slide-left-enter,{ transform: translateX(20px); opacity: 0;}
.slide-left-leave-active { transform: translateX(20px); opacity: 0;}
.slide-left-move { transition: all .5s;}

// right
.slide-right-enter-active { transition: all .5s ease;}
.slide-right-leave-active { transition: all .5s cubic-bezier(.55,0,.1,1);}
.slide-right-enter { transform: translateX(-20px); opacity: 0;}
.slide-right-leave-active { transform: translateX(20px); opacity: 0;}
.slide-right-move { transition: all .5s;}


// list
.list-enter-active { transition: all .5s ease-in-out;}
.list-leave-active { transition: all .2s ease; opacity: 0;}
.list-enter { transform: translateY(20px); opacity: 0;}
.list-move { transition: all .5s;}
.list-leave-active { position: absolute; width: 100%;}

// fade
.fade-enter-active, .fade-leave-active { transition: opacity .3s; }
.fade-enter, .fade-leave-active { opacity: 0; }
.fade-move { transition: transform .3s; }
.fade-leave-active { position: absolute; }

// btn 
.btn-enter-active, .btn-leave-active { transition: all .5s; }
.btn-enter, .btn-leave-active { opacity: 0; transform: translateX(30px); }
.btn-move { transition: all .5s; }
.btn-leave-active { position: absolute; }

.fade-left-enter-active,.fade-right-enter-active{
  transition: all .08 ease;
  position: absolute;
}
.fade-left-leave-active, .fade-right-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  position: absolute;
}
.fade-left-leave-to, .fade-right-enter{
  position: absolute;
  transform: translate3d(-50%, 0, 0);
  opacity: 0
}
.fade-left-enter, .fade-right-leave-to{
  position: absolute;
  transform: translate3d(50%, 0, 0);
  opacity: 0
}
