javascript - Transitioning sorting what is displayed on webpage

Question

Looking for a way to do something like this.

Where when you click on a section it nicely transitions them.

Would it be a Jquery plug in or done with CSS?

Answer 1

看起来你想要一些类似这个插件的东西：流沙

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);
}
}