//首次不展示
.box-enter {
  opacity: 0;
  transform: scale(0.6)
}
.box-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: all 1000ms;
}

.box-exit {
  opacity: 1;
  transform: scale(1);
}

.box-exit-active {
  opacity: 0;
  transform: scale(.6);
  transition: all 1000ms
}


//首次展示 btn
.btn-enter, .btn-appear {
  opacity: 0;
  transform: scale(0.6)
}
.btn-enter-active, .btn-appear-active {
  opacity: 1;
  transform: scale(1);
  transition: all 1000ms;
}
.btn-exit {
  opacity: 1;
  transform: scale(1);
}

.btn-exit-active {
  opacity: 0;
  transform: scale(.6);
  transition: all 1000ms
}

//two two
.two-enter {
  opacity: 0;
  transform: translateX(100%)
}

.two-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1s, transform 1s
}

.two-exit {
  opacity: 1;
  transform: translateX(0)
}

.two-exit-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 1s, transform 1s;
}



//list

.item{
  border: 1px solid red;
}
.item-enter {
  opacity: 0;
}
.item-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.item-exit {
  opacity: 1;
}
.item-exit-active {
  opacity: 0;
  transition: opacity 500ms ease-in;
}