Question

今天我访问了网站https://www.wienerprivatbank.com/（它的德语，但如果你访问它，你会明白这一点）。我意识到，当我点击链接时，菜单栏会显示加载和构建新页面的整个时间。我如何实现这一目标？

在我看来，这看起来很甜蜜，我也想实现它。

干杯

Answer 1

您可以使用Angular js和Rest API分别刷新视图和数据

Answer 2

css-tricks.com有一个很棒的截屏视频，请看：

Best Practices with Dynamic Content

Answer 3

这是一个所谓的“单页应用程序” - ＆gt; https://en.wikipedia.org/wiki/Single-page_application

只是一些可见的部分，在这种情况下的菜单，与初始请求一起发送。页面的其余部分通过javascript异步加载。如果单击某个链接，则不是新请求包含刷新。只有更换部件才能刷新。

您可以使用vanilla javascript或jQuery实现此目的。但是有一些非常好的框架致力于此事。 Angular，React等。

Answer 4

They are using CSS for Fade-in transition. You need to add class '.fade-in' and once content is loaded then add another class '.anim' to show content. See example below:

setTimeout(function() {
  document.getElementById('target').classList.add('anim');
}, 1000);

.fade-in.anim {
  opacity: 1;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.fade-in {
  opacity: 0;
}

<p>estibulum semper, odio in scelerisque luctus, ex urna tristique purus, nec auctor lectus tellus pharetra nisl. Nam vehicula quis odio in ornare. Phasellus pulvinar, justo vitae tempus porta, nulla nibh suscipit ipsum, vel scelerisque metus ex ut magna.
  Morbi facilisis nisi eget nisi sollicitudin auctor. Proin lacinia turpis a porttitor varius. Maecenas eu ante et arcu vulputate iaculis eget non metus. Morbi elementum magna a facilisis pellentesque. Etiam sodales euismod imperdiet. Sed blandit vitae
  leo ut condimentum.</p>
<p id="target" class="fade-in">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula mauris dui, a consectetur nunc volutpat ultrices. Nam dapibus sagittis diam eu ultricies. Cras et pharetra nisi. Duis vel nisl et tellus venenatis laoreet ut sit amet purus. Pellentesque
  ullamcorper augue nulla, sit amet scelerisque eros condimentum quis. Vivamus sit amet felis gravida, consectetur purus eu, aliquet nunc. Nam nec mauris ut eros malesuada iaculis in a diam. Nunc imperdiet leo id sapien iaculis, a pretium est pharetra.
  Integer convallis erat nec velit lobortis pharetra. Curabitur sed metus interdum, vulputate ipsum quis, blandit quam. Etiam odio leo, semper sed varius ut, luctus at augue. Mauris viverra, mauris id rhoncus posuere, ex purus sollicitudin mi, ut aliquam
  augue felis ac elit. Mauris tincidunt eleifend orci elementum rutrum. Donec ultricies lorem at imperdiet efficitur. Mauris condimentum euismod enim, ut pulvinar tortor hendrerit ac.</p>

I will recommend you to view the source code of the website in debugger and learn :)

Answer 5

You could accomplish this easily by using any Javascript framework like React, AngularJS or Angular (2).

An example in Angular is the following:

<app-menu></app-menu>

  <router-outlet></router-outlet>

<app-footer></app-footer>

Where the app-menu and app-footer tags will always be displayed (template for the menu and footer respectively) and the content of your app will dynamically change inside of your router-outlet tag.

在页面加载期间显示菜单栏

5 个答案: