html怎么做动态切换效果,jQuery实现切换页面过渡动画效果

直接为大家介绍制作过程，希望大家可以喜欢。

HTML结构

该页面切换特效的HTML结构使用一个元素来作为页面的包裹元素，div.cd-cover-layer用于制作页面切换时的遮罩层，div.cd-loading-bar是进行ajax加载时的loading进度条。

Page Transition

CSS样式

该页面切换特效中使用body::before和body::after伪元素在页面切换过程中创建两个遮罩层来遮住页面内容。它们的定位是固定定位，高度等于50vh，宽度为100%。默认情况下，使用CSS transform属性将它们隐藏起来(translateY(-100%)/translateY(100%))。当用户切换页面的时候，这些元素被移动回视口当中(通过在

元素上添加.page-is-changing class)。

下面的图片演示了这个过程：

页面切换特效

body::after, body::before {

/* these are the 2 half blocks which cover the content once the animation is triggered */

height: 50vh;

width: 100%;

position: fixed;

le