移动端H5多屏页面，如何优雅的在左右滑动时为每个页面重复加载相应的动画

常见的H5页面，不管是左右滑动还是上下滑动，每个页面都有对应的动画效果，当我们不停的反复滑动时，每次滑动到一个新的页面，那么这个页面的动画就会被重复触发一次，想问问各位在自己的项目中是怎样实现的

我的方法：

设置一个全局变量，每次滑到一个新的页面，就把这个页面的id传递给全局变量，匿名函数根据这个id 的变化，加载对应的动画，离开这个页面后，id变化，我先把这个页面的dom复原，然后再去下一个页面触发动画

不足：

就是每次离开一个页面时，我就要复原dom，这个操作很麻烦，还有就是根据id变化加载动画，用起来很不爽，各位有何见解

demo:

临时找了一个demo，汰渍洗衣液的H5宣传页面，感觉很有爱
http://wximg.qq.com/tmt/_events/20150508-promo-omo/dist/index.html

---

.normal{
    width:100px;
    height:100px;
    transition:all ease .3s;
    background-color: red;
}

.active .normal{
    width:300px;
    height:300px;
}



<div class="wrap">
    <div class="normal"></div>
</div>

动态删减 active 到 wrap上 就可以了！你所有的动画都要在 .active .xxx下面定义。

测试地址：http://jsbin.com/tenameyisu/edit?html,css,js,output