??? ?? ??? CSS3 ? JavaScript? ??? ?? ?? ? ? ????. ?? ??? ??? ????. 1. CSS? ???? ?? ?? ????? ??? ?? ?? ???? ???? ??? ?? ? ?? ?????; 2. ???? ???? ?? ??? ??? ???? ?? ?? ???? ????? ??? ? ??? ????? ???? ?? JavaScript? ?????. 3. ?? ??????? ????, ???? ??? ???, ???? ?? ? ??? ????? ????? ??????. ?? ??? ????? ???? ??? ???? ???? CSS ??? ???? ???? ????? ??? ???? ?? ??? ?????? ???? ??? ??? ????? ???? ???? ??? ?? ??? ?? ? ? ????.

?? ? ???, ?? ?? ??? ?? ???? (SPA) ?? ??? ??? ??????? ? ????? ??? ?? ??? ?? ? ?? ??? ????. HTML5 ??? ?? ?? ??? ???? ??? CSS3 ? JavaScript? ???? ???? ???? ??? ?? ??? ?? ?? ? ? ????.

???? ??? ?? ??

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

• ?? ??? ?? ?????? ???
• ?? ?????? <a></a> ??? ??????
• Ajax? ???????? ???? ????? ?? ?????

??? ?? ??? ???? ?? ????? CSS ?? ?? ?????? ???? ??? ??? ?? ? ? JavaScript? ?? ??? ??? ?? ? ??? ?????.

?? ??? ?????? ?? ??

1. CSS? ???? ?? ???? ??????

CSS? ??? ?? ??? ?????? ?????. transition ?? animation ???? ??? ?? ? ??? ?????? ?? ? ? ????.

 . ??? {
  ?? : ???? 0.5S ??, 0.5S ??? ??;
}

.page.leave {
  ???? : 0;
  ?? : translatex (-20px);
}

.page.enter {
  ???? : 0;
  ?? : translatex (20px);
}

? ???? ???? "???"??? ???? ???? ???? ? ???? "???? ????? ?????.

2. ??? ??? ??? ??? ??????

??? ?? ??? ?? (? : vue.js, React ?? Angular)? ???? ?? ????? ?? ?? ?? ?? (? : vue? <transition> )? ?????. ??? ??? ??? ???? ???? ??? ??? ???? ???? ??? ??? ?? ? ? ????.

?? ??, ??? ?? ? ? ?? leave ???? ?? ???? ???? ? ???????? ?? ?????? ?? ? ??? ????? enter ???? ? ???? ??????.

 document.querySelector ( 'a'). addEventListener ( 'click', function (e) {
  e.preventDefault ();
  const currentPage = document.querySelector ( '. page');

  currentpage.classlist.add ( 'Leave');

  settimeout (() => {
    // currentPage.classList.remove ( 'Leave')? ?????.
    currentpage.classlist.add ( 'enter');
    currentpage.innerhtml = &#39;<div class = "page"> ? ??? ??? </div>&#39;;

    settimeout (() => {
      currentpage.classlist.remove ( &#39;enter&#39;);
    }, 500);
  }, 500);
});

3. ???? ?? ? ?? ??? ?????

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

• ????? ??? ?? ???? ??? 0.3 ??? 0.6 ? ??? ???? ?? ????.
• ???? ?? ?? ?? (? : transform ? opacity )
• ????? ?? DOM? ??? ??? ?????
• ??? ?? ??? ??? ?? ???? ???? ? ? ????

???? ???? ?? ??

??? ?? ????? ??????

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

 <div id = "app"class = "page">
  <!-??? ??->
</div>

?? ?? JS? ??? ????? ??? ??? ??????.

CSS ??? ??? ????? ?? ?? ??

CSS ??? ???? ?? ???? ??? ???? ?? ????? ??? ???? ???? ? ? ?? ???? ?????.

 : ?? {
  -?? ?? : 0.5S;
}

. ??? {
  ?? : ???? var (-?? ??) ??;
}

?? ????? ?? ?? ??? ?????

?? ???? ???? ??? ??, ?? ???? ???? ????? ? ? ?? ? ? ????. ?? ???? ?? ???? ???? ??? ??? ??? ?? ? ? ????.

 <div class = "page slide-in"> ... </div>
<div class = "page fade-in"> ... </div>

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

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

? ??? HTML5 ??? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!