javascript 动态增加css样式（通过CSS和JavaScript实现多层页面多种切换效果及实例）

本文将向您展示如何创建简单而新式的页面切换的过渡效果。也许你已经发现了一些在或Keep Portland Weird等网站上看到的很酷的效果，其中两层或多层叠加层在页面上进行动画处理以显示一些新内容。让我们看看他们如何做到这一点。我们只关注动画部分，而不是内容的加载。对于效果，我们将使用CSS动画。

对于我们的简单演示，我们将创建一个完整的宽度和高度布局，其中一些箭头将触发叠加动画。想法是显示一个页面，并在叠加动画的中间，切换到另一个页面。虽然使用的是静态内容，但你可以在动画过程中插入动态解决方案，以便即时获取一些数据。

我们的HTML标签如下：

叠加层的结构将使用JavaScript插入，它作为一个固定元素放在所有其他元素之上。根据页面指示方向，为该元素提供一些CSS样式类，以正确地应用样式。叠加层将包含预先定义好的多个层。每个层都设置不同的背景颜色以及特定的动画。

页面代码类似如：

每层还设置不同的背景颜色。为了展示独特的效果，将为每个层设置不同的动画。为此，我们最初将父层设置为屏幕外（off-screen）位置，然后将该层动画化。主要元素的初始设置在脚本中完成（见下文）。然后在样式表中定义层的动画行为，这取决于效果类，以及要显示的页面的其他样式。

首先，让我们看一下我们的主体，容器和页面的一些常规样式（省略供应商前缀）：

我们希望我们的页面是全宽和高度，并隐藏任何溢出。默认情况下，使用JS（我们使用Modernizr），页面被隐藏，当前类将相应的页面设置为可见。我们希望确保我们的布局在没有JavaScript的情况下正常运行，因此我们添加了"条件"样式。

让我们来展示的风格是怎样的。我们开始层置于所有之上，而且具有固定的位置：

根据当前使用的方向，需要设置一些初始定位样式。正如稍后将看到的JavaScript角本，我们将设置一些其他的变换，以确保我们的初始层的顶部始终是面向屏幕的那个。这将简化效果，因为内层动画将始终相同（向上移动），因此如果父项旋转并正确定位，我们无需为每个方向定义新动画：

图层将具有默认背景颜色，然后以动态方式为每个效果单独定位：

接下来，让我们看看一个示例效果。三层效果通过特殊的为每个图层添加动画。anim-Effect类被添加到主体中，以便我们知道我们目前使用的是哪种效果。该revealer–animate是考虑到初始顺序和触发动画。

正如我们在这里看到的，我们将向所有图层添加相同的动画属性，但动画名称除外。通过三种不同的动画，我们定义了关键帧中每个动画的延迟。就像我们一样，我们确保所有动画在同一时刻结束，但允许不同的外观时间：

我们在这里做的是让第一层先移动，然后在中间"暂停"直到75％，同时在可见屏幕的顶部。然后我们将其移向相反的方向以显示新内容。对于其他两个层也是如此，只是在这里我们在不同的关键帧处启动它们，减少"暂停"。最后一层根本没有暂停，只是从25％开始到另一边。

我们做了一个小插件，根据一些选项创建了revealer 。默认选项如下：

添加启动器及其图层和相应效果类的功能如下所示：

最关键的函数设置我们的揭密元素的初始定位，并添加用于触发动画和所选效果的控件类。

根据我们选择的方向，我们需要确保揭示元素获得正确的变换。请记住，我们只是简单地旋转和定位探测器，使顶部始终面向屏幕，以便层始终向上移动。对于角落情况，我们需要确保展示器的宽度和高度正确设置到页面的对角线。对于左右两种情况，我们需要确保展示器的高度是屏幕的宽度，因为我们将它旋转90度。

以上讲述了通过CSS和JavaScript实现多层页面的切换动画效果，希望这个小的技巧能对你有所帮助。如果感兴趣，你还可以访问以下地址，查看动画的效果的Demo。

http://www.ikinsoft.com/demo/ani_effects/index.html