javascript - Webページに表示されるものを並べ替えるトランジション

Question

このようなことをする方法を探しています。

セクションをクリックすると、それらがうまく遷移します。

それは Jquery プラグインですか、それとも CSS で行われますか?

Answer 1

このプラグインのラインに沿ったものが必要なようです: Quicksand

Answer 2

jQuery と CSS の両方でそれを行うことができますが、CSS のサポートは jQuery 中心のソリューションよりも少し劣ります。

jQueryで使用するには、このようなものを試してください...

$('outerdiv').click(function() {
  // `this` being the html element clicked on
  $(this).fadeOut(function() {  //After fadeOut completes,

    $('.page-to-show').fadeIn();  //Fade in target page

  });
});

この設定方法についてさらにアドバイスが必要な場合はお知らせください。

Answer 3

これを試してください。注:.cont は、フェードしたい div またはボディの名前などを表します。

.cont{
animation: transitionIn 2s;
}
@keyframes transitionIn{
from{
opacity: 0;
transform: rotateX(-10deg);
}
to{
opacity: 1;
transform: rotateX(0);
}
}