VUE?? ????? ?? ?????? ???? ??? ?????? ??? <transition> ? ?? ??? ???? ????. 1. <transition>? ?? ??? ?? ? ?? ?????? ???? ?? ??? ?? ??? ???? ?? CSS ???? ?? ?????. 2. <transition-group>? ?? ?????? ???? ?? ??? ??, ?? ? ??? ?????? ???? ?? ??? ?? ???????. 3. ????? ??? ??? ?? ??, ??????? ?? ?? ??? ??? ???? 200 ~ 400ms ??? ????? ?? ??? ???? ??? ??? ??????.

??? ?? ? ?????? ???? ???? VUE ?? ???? ??? ? ??? ?? ? ????. ??? ?? ?? ??? ?? ?? ??? ???? ?? ??? ???? ???? ???? ?? ????? ?? ????. Vue? <transition></transition> ? <transition-group></transition-group> ? ? ?? ??? ??? ?????. ???? ???? ?? ????? ???? ??? ??? ????.

<transition></transition> ?? ?? ??? ?????

<transition></transition> ?? ??? DOM? ????? ??? ?? ?? ?? ?? ??? ????. ??? ????? ????? ???? ????. ???, ??? ?? ???? ??? ???? CSS? ??? ? ????.

??? ???? ????? ?? ? ??? :

 <?? ?? = "???">
  <div v-show = "ismodalvisible"> ?? ?????! </div>
</??>

Vue? fade-enter-active , fade-leave-active , fade-enter ? fade-leave-to ? ?? ???? ???? ?? ? ?????. ??? ? ??? ??????? ?? CSS? ?????.

 .fade-enter-active, .fade-leave-active {
  ?? : ???? 0.3s;
}
.fade-enter, .fade-leave-to {
  ???? : 0;
}

??? ??? ???? ????. ??? CSS? ????? ?? ??? VUE? ?? ?? ?? ???? ????? ????.

<transition-group> ? ????? ??

TODO ?? ??? ?? ?? ??? ?? ? ?? <transition-group> ?????. <transition> ? ??,? ??? ?? ??? ?????? (????? <span> ) ??? ?? ul ?? div ? ?? ??? ???????.

?? ?? ??? ????.

 <Transition-Group name = "list"tag = "ul">
  <li v-for = "??? ??": key = "item.id">
    {{item.text}}
  </li>
</Transition-Group>

??? ? ?? ?? ????? :

 .list-enter-active, .list-leave-active {
  ?? : ?? 0.3 ?;
}
.list-enter, .list-leave-to {
  ???? : 0;
  ?? : Translatey (20px);
}

???? ?? ?? ? ?? : ??? ?? ???? ?? ?? ???? ????? ?? ? ????. ?? ?? move ???? ??????.

 .list-move {
  ?? : 0.3S ??;
}

?? ??? ??? ???? ??? ???? ?????.

???? ??? ?

• v-if ? v-show ?? ?? ?????? : <transition></transition> ? ??? ????? v-if ??? ??? ???? ?? v-show ???? ?????. ??? DOM? ???? ????? ?? ??????.
• VUE? ? ??? ???? ???? ?? <transition-group></transition-group> ???? ??? ?? key ??? ?????? .
• ???? ??? ????? ??????? ???? . ?? ? ??? ?? ?? ???? ? ??? ??? ? ????. ??? ?? transform ? opacity ??????.
• JavaScript ??? ?? : ?????? ?? ? ? ???? ??? ???? ?? @after-enter , @before-leave ?? ??????.

??? ??????

?? UI ??? ?????? ??? ?? ????. ???? ???? ???? ?? ? ??? ?? ?? ? ? ????. ??? ??? ????? ?? ??? ????.

• ?? ?? ? ????
• ?? ??? ??
• ?? ???
• ?? ?????? ?? ?? (?? ??? ?? ??? ??)
• ? ?? ?? ??? ??

200-400ms? ?????? ?? ???? ?? ??????. ? ?? ?? ??? ???.

?, Vue? ?? ???? ??? ?? ??? ????? ?? ?????. ??? ??? ???? ??? ??? ??? ?? ?? ? ?? ??? ????? ??? ??? ?????.

? ??? Vue? ?? ? ????? ??? (, )? ???? ???? ??? ?????? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!