CSS ?? ????? ? ??? ??? ?? ??? ? ????. ??? ???? ??? ?? ?? ? ????. ??? ??? ??? ??? ???? ????? ???????? ???? ?? ??? ???????? ?? CSS ????? ?????? ??????. ??? ??? ?????? ???? : ??? ?????? ??? ??? ?????? ??? ??????

??, ?? ?????.

(???) ??? ?? : ??

?? ?? ??? ??? ???? ???? ?? ??? ?????? ????????. ???, ?? ?? ???? ??? ?? ??? ??? ??? ?? ???? ???. ? ??? ???? ??? ??? ???? ???????. ? ?? ??? ?? ?? ??? CSS? ???? ??? ?? ?????? ??? ? ??? ????? ?? ?????. ??? ??? ?? ??? ???? ?? ???? ???? ?? CSS ????? ?????? ??????.

Macromedia? Dreamweaver? 1997 ? 12 ?? ???? Hover? ??? ?? ? ??? ??? ???? ??????. ? ??? ???? HTML? ???? JavaScript ??? ???????. ? ??? MM_SwapImage ()? ?????? ??? ? ??? ????????. DreamWeaver ????? ???? ?? ?????? ??? ?? ????? ??? ?? ?? ????. ? ??? ?? ?? ???? Adobe 's Dreamweaver (2005 ? Adobe Aucked Macromedia) ???? ?? 2018 ? ??? ??? ??? ??? ??????.

JavaScript ??? ??? ?? ? ??? ?? ???? ???? SRC ??? ???? ???? ?? ???? ?????. ???? ??? ?? ?????.

 <a href="#" onmouseout="mm_swapimgrestore ()" onmouseover="mm_swapimage ( 'imageName', '', 'newImage.jpg', 1)">
  <img  src="originalImage.jpg" name="imageName"    style="max-width:90%"  style="max-width:90%" border="0" alt="?? ????? ?????? ????? ?????" >
</a>

???? ??? ???, JavaScript? ??? ???? ?? ??? ?? ????. ??? ?? ? ?? ???? ??? ???? ??? ??? ? ? ????. ??? JavaScript? ????? ??? ???? ????? (1995 ?? ??) ????? ????? ????? ????? ??????. ??? ???? JavaScript? ??? ?? ?? ?? ?? ??? ? ???? ??? ?? ??? JavaScript? ? ?? ????. Dreamweaver? ???? ??? ??? ??? ????? ? ????? JavaScript? ??? ???? ?????. ??? ?? ???? ??? ??? ??? "??"? ????????. ??? ??? ??? ? ???? ??? ?? ??? ? ? ????. 3.0 ????, 4.0 ????, IE 3.0, IE 4.0, Netscape 3.0, Netscape 4.0. ?, ?? ??.

DreamWeaver? ?? ?? ? ? ? 1 ? ?, W3C? CSS2 ??? ??? ?? ??????. 1998 ? 1 ?? ?? ??? ??. ?? ?? ???? ????? ?????? ??? ?? ??? ??? ? ??? ?????. ???? ??? ??? ?? ???? ?? ???? ??? ??? ??? ??? MM_SwapImage ()? ?? ?? ??? ??? ? ????. ???? ??? ??? ????? CSS2? ???? ???? ?? ? ?? ??? ??? ?? ? ?????? ?? ??? ??????? ? ?? ??? ? ??????. ????? CSS2.1? ?? W3C ?? ??? ????, ?? 2011 ? 6 ?? ?? ?“??”CSS? ??? ?? ? ? ????.

? ?? ??? JQuery? 2006 ?? ????. ???? JQuery? ?? ???? ??? JavaScript? ????? ? ? ??????. ??? ???? ???? ? ??, jQuery? ? ?? ??? animate () ??? ??????. ? ??? ???? ???? ?? ??? CSS ??? ????? ? ? ????. ???? ????. ??? ???? ??? ??? ????? ????? ??? CSS ???? ???? ?? ?????. ???? ???? ?? ?? ???? ?? JavaScript ?????? ???? ?? ??????.

: ?? ?? ???? ??? ??? ???? ?? ? ??? ?? ??? ??? ?? ? ??????. ?? ?? ?? ????? ?? ? ???? ? ??? ??? ??? ????? ? ? ?????. JQuery? Animate () ??? ??? ??? ??????. ??? ?? ??? ?? ?? ?????. ? ??? ??? ? ???? ?? ???? ?? CSS2.1? ?? ??? ???? ?? ??? ?????? ?? ??? ? ???????. CSS ?? ?? ?? 3? ?? ? ?? ?? ??? 2009 ? 3 ? W3C?? ?? ??????. CSS ????? ?? ?? 3? ? ?? ?? ??? ?? ??? ???????. ? CSS ??? ?? 2018 ? 10 ? ???? ?? ?? ??? ??? ?? ??? ?? ???? ?? ???? ????.

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

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

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

JavaScript ?????

JavaScript? ???? ???? ?????? ?? ???? CSS ?????? ???? ? ??? ??? ?????. ????? ?????? ??? ??? ??? CSS ??? ??? ? ???? ??? ??? API? ???? ??????. ??? ?????? ??? Greensock ? Anime.js? ????. ??? ???? ??? ??? ??? ???? ?? ??? ? ? ???? (Greensock? Codepen?? ?? ???? ????). ??? ?? ?? ??? ???????? ???? ? ???? ??????? ?? ? ? ????.

JavaScript ? CSS ?????

?? CSS ???? ????? ?????? ??? ?? ??? ??? JavaScript? ???? ?? ?????? ????. ??? ????? ? Micron.js? ??? ??? ??? JavaScript API ? ??? ??? ?? ?????. ? ??? ?????? ???? ??? ??? ?? ?? ? ?????? ?? ??? ? ????. ?? ????? Motion UI? JavaScript ??? ??? ?? ????? ?????. ??? ??? ?? JavaScript API, ?? ?? ??? ? ??? ??? ?? ? ???? ???? ?????. ??? ??? ?????? ?? ?? ? ???????? ?? ???? ??? ?????.

CSS ?????

? ?? ??? ?????? CSS ?????. ????? ??? HTML? ?? ??? ?????? CSS ?????. ?? ?? ?? CSS ???? ???? ???? ??? ?????? ?????. ? ??? ?????? ? ?? ?? ?????? ?? ??????. ?,? ? ?? ?? ????? ???? ? ??? ????. Animate.css? ? CSS ????? Animista? ??? ??? ??? ?????? ??? ??? ???? ?????? ?????. ? ?????? ?? ???? ????? ????? ??? ???????. ????? ???? ??? ?? ????? ?????.

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

?, ??? ????. 3? ??? ?? ???? ????.

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

?? ?????

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

?? ?????

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

?? ?????

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

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

??? ?? ??!

?? ?????? ?? ?? ??? ?? ? ? ??? ?? ?????? ?? ??? ?? ???? ??? ????. ??? ????? ? ??? Hover.CSS?? ??? ??? ?? ???? ??? ?? ??? ???? ?? ? ??????. ??? ??? ??? ??? ?? ???? ?? ??????? ?????? ???? ????. ?? ?? ???? ??? ???? ?? ? ? ?? ?????.

? ???? Animate.css? ???? TADA ?????? ?????. ??? ??? ?? ???? ? ??????? ?? ?? ??? ??? ????. ???? CSS? ?? ??? ??? ??? ?? ? ? ????. ?? ?? ???? ?? ? ????. ??? ??? ??? ??? ?? ??? ???????.

Tada ??? ??? ??? ??? ????.

 .tada {
  ?????-?? : ??;
}

? ?? ??? ?????? ?? ??? ???? ?? ??? ?? ??? ??? ??? ???? ?? ???? ????. ????? Animate.css? ?? ? ?????? ?? CSS ??? ?? ? ??? ??? ???? ????. ??? ?? ??? ?? ??? ?? ? ????. ???, ??? ??? ?? ?? ? ???? ?????? ???? ????????.

 .tada-hover : ?? {
  ?????-?? : ??;
}

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

?? ??? ??? ?? ???? ??? ?? ??? ?? JavaScript ???? ??????? ???? ??? ?? ??? ????. ?????, ??? ??? ??? DreamWeaver? mm_imageswap () ???? ??? ?????.

 // id #js_example?? ??? ???????
var js_example = document.querySelector ( '#js_example');

// id #js_example??? ??? ??? ? ? ...
js_example.addeventListener ( '??? ??', function () {
  // ... ??? ? ?? ???? ????? : ?????? ?? ...
  this.classlist.add ( '?????', '??');
});
// ... ?? ?? ???? ??? ?? ? ?? ???? ??????.
js_example.addeventListener ( '??? ??', function () {
  this.classlist.remove ( '?????', '??');
});

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

??? ???? ????

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

?? ??????? ?? ???? ??? ?? ?????? ??? ?? ??????? ??? ?? ??? ?????. CSS? Animista? ?? ?????? ?? ??? ??? ??? ?? ?????? ?? ??? ????. ? ??? ?? ?? ? ?????? ?? CSSHAKE???. ?? ?????? ??? ???? ????? ??? ???? ??? ???? ??? ?? ????. ?? ??, CSSHAKE? ??? ?? ?? ????. ??? ?? ??? ?????. ANIMET.CSS? ?? ?????? ?? ???? ??? ? ?? ?????? ???? ?? ???? (??, ??? ?).

??? Animate.css? ?? ?????? ??? ? ??? ?? ? ???????. ???? GitHub ?????? ??? ???? ??? ?? ????. ????? ??? ?? ??? ????????? ?? ?? ???? ?? ?? ?????.

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

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

 var pulse = document.querySelector ( '#pulse');

?? playPulse () {
  pulse.classlist.add ( '?????', '??');
}

pulse.addeventListener ( 'animationEnd', function () {
  pulse.classlist.remove ( '?????', '??');
});

playpulse ();

PlayPulse ??? ?? ? ? ????? ???? ?????. ????? ???? ??? ???? ?????? ??? ?? ? ? ????. ????? ??? ? ?? ????? ???? ?? ?? ? ???? ?? ?? ????. animate.css? ?? ?? ???? ???? ??? ????? ?? ? ? ????? CSS ??? ???? ?? ????.

 #?? {
  ?????-?? ? ??? : 3; / * ? ?? ?? */
}

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

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

 var bounce = document.querySelector ( '#bounce');

bounce.addeventListener ( 'click', function () {
  if (! bounce.classlist.contains ( 'animated')) {
    bounce.classlist.add ( '?????', '???', '??');
  } ? ?? {
    bounce.classlist.remove ( '?????', '???', '??');
  }
});

??? ?????. ?????? "?????"???? ??? ?? ?? ???? ?????. ??? ?? ?? ????? ???? ???? ?????? ?????. ??? ??? ?????? ???? ?? ???? ?????. ?????? ?? ?? ???? ????. ???? Animate.css? ??? ???? ?????. ?? ?????? ??? ??? ???? ??? CSS?? ??? ????.

 #bounce {
  ?????-?? ? ??? : ??;
}

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

??? ??? ?????

? ??? ?? ? ? ?? (CSS ??? ???? ??)? ?? ??????? ?? ???? ??? ??????? ?????. ??? ??? ???? ????? ?? ? ??? ?? ? ??? ????????. ?? ?? ??? ?? ?????? ? ??? ?? ???? ??? ? ??? ???? ??? ?? ?? ??? ???? ???? ???? ????. ? ?? ??? ???? ? ??? ????? ?? ???????. ?? ???? ? ???? ????? ???? ?? ??? ????? ???? ???? ? ????? ?? ???? ??? ? ????. Sarah Drasner? Georgy Marchuk? ??? ??? ??? ?? ??? ?? ??? ????.

???? ?? ????? ?????? ?? ????? ?? ??? ???? ???? ??? ???? ????. ?? JavaScript? ???? ?????? ???? ??? ?? ? ??? ???? ??? ????? ??? ???? ??? ?? ?????.

?? ??? ?????

? ???? ANIMET.CSS? ?????? ?? ???????. ? ?? Fadeindown ?????? ???????.

?? ??? DOM? ???? ?? ??? ??? ?? ??? ??? ??? ??? ?? ?? ????. ?? ??? ??? ??????? ? ??? ????? ??? ?? ?????? ???? ??? ??? ????. Animate.css (? ??? ?? ?? ?????)? ?? ?????? ??? ???? ?? ?? ????.

 insertElement = document.createElement ( 'div');
insertElement.innerText = '? div? ?????';
insertElement.classlist.add ( '?????', '??? ? ???');

insertElement.addeventListener ( 'animationEnd', function () {
  this.classlist.remove ( '?????', 'Fadeindown');
});

document.body.append (insertElement);

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

?? ??? ?????

?? ??? ???? ?? ??? ???? ?? ?????. ??? ?? ????? ??? ????? ??? ? ?????. ?? ?? AnimationEnd ????? ??? DOM?? ??? ?????. ? ???? FadeIndown ?????? ? ???? ??? Animate.css? FadeOutdown ?????? ?????.

 revelement = document.querySelector ( '#removeElement');

removelement.addeventListener ( 'animationEnd', function () {
  this.remove ();
});

removeElement.classList.add ( '?????', 'FadeOutdown');

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

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

? ?? ???, ? ?.!

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

?? ??? ??? ????? ???? ?? ????? JavaScript? ??? ????. ??, ??? ??? ?? ??? ? ??? ????? ?????. ?? ?? ???? ??? ???? ? ?? ??? ????.

 let button = document.querySelector ( 'button');
???? = document.querySelector ( '. ????');
box1 = document.createElement ( 'div');
box2 = document.createElement ( 'div');

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

 removeClasses = function () {
  box1.classlist.remove ( '?????', 'fadeoutright', 'fadeinleft');
  box2.classlist.remove ( '?????', 'fadeoutright', 'fadeinleft');
}

?? ??? ???? ??? ?????. ??, ?? ??? ???? ?? ?????. ?? ????, ??? ??? ??? ?? ? ? ????. ??? ??? SwitchElements ???? ??? ??? ???? ?? ???? ????? ???? ??? ?? ????. ?? ?? ?????? ??? ? ?????? ? ??? ?????. ????, ??? ????? ???? ?? ??? ???? ????? ???? ?????? ??? ? ????.

 switchElements = function () {
  currentElement = document.querySelector ( '. container .box');
  LefeElement = currentElement.classList.contains ( 'box1')???? Box1 : Box2;
  Enterlement = LeaveElement === Box1???? Box2 : Box1;
  
  LeaveElement.removeEventListener ( 'AnimationEnd', SwitchElements);
  LeaveElement.remove ();
  Enterlement.classlist.add ( '?????', 'FadeInleft');
  Container.Append (Enterlement);
}

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

 box1.classlist.add ( 'box', 'box1');
box1.addeventListener ( 'animationend', RemoveClasses);
box2.classlist.add ( 'box', 'box2');
box2.addeventListener ( 'animationend', RemoveClasses);

????. AppendChild (Box1);

?????, ??? ???? ???? ??? ?? ?? ??? ???? ????. ??? ??? ???? ????? ??? ????? ???? ?? ????. ? ???? ??? ?? ??? ??????. ?? ?? ?? ??? ???? ???, ? ?? ???, ?????? ??? ?? ??? ???? ?????. ?? ?? ?? ??? ???? ?? ??? SwitchElements ??? ???? AnimationEnd ???? ??? ???? ?????.

 button.adeventListener ( 'click', function () {
  currentElement = document.querySelector ( '. container .box');
  
  if (currentElement.classList.contains ( 'box1')) {
    box1.classlist.add ( '?????', 'fadeoutright');
    box1.addeventListener ( 'animationend', switchElements);
  } ? ?? {
    box2.classlist.add ( '?????', 'fadeoutright');
    box2.addeventListener ( 'animationend', switchElements);
  }
}

? ??? ??? ???? ? ?? ??? ?? ?? ?? ????? ????. ??? ?? ??? ?? ?? ???? ??? ? ????. ???? ?? ??? ??? ???? ? ?? ??? ???? ? ?????. ???? MotionUi? ?? ?? ????? ?????? ?? ??? ????? JavaScript? ?????. ???? ? ? ?? ?? vuejs? ?? ?? JavaScript ??? ??? ?? ??? ????? ??? ??? ????.

???? ??? ???? ???? ? ?? ??? ??????. ??? ???? ??? ????? ???? ??? ???? ????? ?????. ?????? ??? ?? ??? ?? ? ? ?? ??? ????. ? ??? ???? ??? JavaScript? ?? ??? ???? ?????? ?? ?? ? ? ??? ????. ?? ???? ? ?? ????? ????. ??? animate.css? ???? ?? ??? ?????? Animista? ?????. ? ???? ??? ??? ???? ?? ????. ??? ??? ?? ???? ???? ??? ??? ??????.

?? ????? ...

??? ???? ?? ???????? ?????? ?? ???? ??? ?????? ???, ????? ??? ? ???, ?? ?????? ??? ??? ??? ? ????. ?? ?, WebKit? ??? ?? ???? ?? ??? ???? ?? Prefer-RESDUCED-MOOT MEDIC MEDIC ??? ??????. ?? ??? (Eric Bailey)? ?? ??? ??? ?? ?? ??? ?? ??? ?? ?? ????? ?? ??? ??????. ??? ??? ?????.

????, ??? ????? ?????? ???? ?? ??? ?????? ??? ??? ??? ??? ??? ??? ???? ? ?? ????. ??? ??? ??? ?? ?? ??? ???? ?? ????? ??? ???? ?? ?? ????. ?? ??, animate.css? _base.scss ?? ??? ????.

 @Media (print), (????-?? ??) {
  .Animated {
    ????? : ? ??! ??;
    ?? : ??! ??;
  }
}

? ??? ?? ?????? ???? ?? ?? ?? ???? ??? ?? ??? ?? ?????. ???? ANIMET.CSS? ?? ???? ?? ?????? ?? CSS? ?? ???? ??? ? ? ????. ?? ???? ???? ??? ?? ????? ???? ?????? ?? ??? ?? ??? ??? ???? ???????.

 .Scale-up-center {
  ????? : ??? ? ?? 0.4S ??-? ?? (0.390, 0.575, 0.565, 1.000);
}

@keyframes scale-up-center {
  0% {?? : ??? (0.5); }
  100% {?? : ??? (1); }
}

@Media (print), (????-?? ??) {
  .Scale-up-center {
    ????? : ? ??! ??;
    ?? : ??! ??;
  }
}

?????, ?? ?? Animate.css? ???? ??? ???? Animista? ????? ???? ????????. ??????? ????? ??? ?? ????? ???? ???? ???????. ??? ?? ????? ?? ?????? ??? ? ???? ?? ? ?? ???? ?? ??? ????? ???? ?? ??? ??? ?? ??? ? ?? ??? ? ? ????.

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

????? React ? Vue? ?? ??? ??? ??? ??? JavaScript?? ?? CSS ?????? ?? ??? ? ????. ?? ?? ???? ????? ???? ???? ??? ??? ?? ?????. ??? ??? ?? ?? ? ??? ??? ? ????. ??? ?? ??? ??? ????? ??? ?? ??? ?????? ???? ?? ?? ??? ????? ????. ?? ??? ??? ?? ??????.

?? ??

?? ??? ??, ? ?? ???? CSS (?? ????)? ???? ?? ????. VUE? ?? ??? ??? JavaScript ???? ??? ????? ??? ?? ????.

 <button event>
  ??
??></button>

 ?? : {
  ?? : ?? (e, type) {
    e.target.classlist.add ( '?????', ??);
  },
  ??? : ?? (e, type) {
    e.target.classlist.remove ( '?????', ??);
  }
}

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

??? ?? ???

??? ?? ???? ???? ?? ??? ?? ????. ? ?? VUE? ?? ???? ??? ???? ?? ???? ????.

 <div :> ?? </div>

<div :> ??? </div>

?? ???, ?? ispulse? ?? ??? ? ???? ?????. ???? ??? ?? isbounce? ?? ? ??? ????? ? ??? ???? ?????. ?? ???? ???? ????? isbounce ??? ???? ??? ??? ??? ???? ?? ? ????.

??

???? Vue? ?? ?? ??? ??? ?? ?? ???? ?? ?? ????? ???? ?? ??? ??? ??? ?????. React? ?? ?? ?????? ??? ???? ?? ??? ?? ? ? ????. VUE? ????? ???? ???? ?? ?? ?? ?????? ?????.

 
  <div v-if="Toggle" key="if"> if Example </div>
  <div v-else key="else"> else example </div>
??>

Animate.css? ???? ??? ??? ? ?????. Enter-Active? ?? Fadeindown? ?? ??? ????? ???? ?????. Leave-Active? ?? ??? ????? ???? FadeOutdown? ?? ?????. ?? ??? ??? ???? ??? ??? ?????. Vue? ??? ?? ? ??? ?????.

JavaScript ??? ???? ?? ????? ?????? ?????? ??? ??? ????? ??????.

??? ??????!

??? ?? ? 3 ? CSS ????? ?????? ?? ??? ????? ???? ???? ?? ????. ??? ????? ??, ???, ???? ??? ?????. Greensock ?? Anime.js? ?? ??? JavaScript ???????? ?????? ????. ??? ??? ?????? ?????? ????.

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

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