在页面加载CSS之前单击div转换

Question

在这个页面上，我在页面底部有一个按钮，它必须变宽，然后在单击时向上移动。按钮到达新位置后，应加载新内容。 我已经发现很多关于CSS转换动画的悬停动画，但我想将它用作页面转换。 如何在加载新页面之前完成此转换？ 我希望用尽可能少的JS做到这一点。 Thanx Y'all！

Answer 1

根据您的要求：

这会延迟页面加载，直到转换完成（只需将setTimeout设置为CSS转换的持续时间）。

$('.link').click(function () {
  $(this).addClass('clicked');
  setTimeout( function() {
    window.location.href = "url for page goes here";
  }, 500);//set 500 to whatever timeout you want
});

请参阅笔示例：（http://cdpn.io/vyuch）

<强> BUT

这不是一个好主意......如果CSS转换不可用，它将看起来像一个可怕的链接并混淆用户。如果是的话，它仍然缓慢且令人沮丧。

如果您希望在同一页面上加载内容，则需要使用AJAX。为了解决这个问题，一些更多的信息会有所帮助...