javascript - 是否可以在 Wicket 中进行平滑的页面导航转换？

Question

我想在 Wicket Java 框架中的页面导航之间进行一些平滑的转换。是否可以使用 Wicket 工具、javascript 和 css？我找不到办法做到这一点。

感谢您的回答。

Answer 1

Wicket 没有为此提供解决方案。大多数 Wicket 应用程序使用整页重新推荐/重定向或 Ajax 来更新页面的一部分，而不是整个页面。

我建议您尝试使用 CSS 关键帧。这个想法是在这两个 JS 事件上将 CSS 类添加到页面主体:beforeunload 和 DOMContentLoaded(又名 domready)。当 beforeunload 被触发时，您需要删除 fade-in 并添加 fade-out CSS 类。对 DOMContentLoaded 执行相反的操作。

CSS 看起来像:

/* make keyframes that tell the start state and the end state of our object */

 @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

 .fade-in {
      opacity:0;  /* make things invisible upon start */
      -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
      -moz-animation:fadeIn ease-in 1;
      animation:fadeIn ease-in 1;

      -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
      -moz-animation-fill-mode:forwards;
      animation-fill-mode:forwards;

      -webkit-animation-duration:1s;
      -moz-animation-duration:1s;
      animation-duration:1s;
 }

我不太擅长 CSS，所以最好向 Google 询问更多信息。