/enter是入场前的刹那（点击按钮），appear指页面第一次加载前的一刹那（自动）
.fade-enter, .fade-appear {
    opacity: 0;
}
//enter-active指入场后到入场结束的过程，enter的下一帧插入，appear-active则是页面第一次加载自动执行
.fade-enter-active, .fade-appear-active { 
    opacity: 1;
    transition: opacity 1s ease-in;
}
//入场动画执行完毕后，保持状态，同时会移除fade-enter和fade-enter-active
.fade-enter-done {
    opacity: 1;
}
//同理，出场前的一刹那，以下就不详细解释了，一样的道理
.fade-exit {
    opacity: 1;
}

.fade-exit-active {
    opacity: 0;
    transition: opacity 1s ease-in;
}

.fade-exit-done {
    opacity: 0;
}

onEnter
应用<Transition>“ enter”或“ appear”类后立即触发的回调。
onEntering
应用<Transition>“ enter-active”或“ appear-active”类后立即触发的回调。
onEntered
<Transition>在删除 “ enter”或“ appear”类并将done该类添加到DOM节点后立即触发的回调。`
<Transition>应用“退出”类后立即触发的回调。`
onExit
<Transition>应用“exit”类后立即触发的回调。
onExiting
<Transition>应用“退出exit-active”后立即触发的回调。`
onExited
删除<Transition> “exit-done”类并将该类添加到DOM节点后立即触发的回调