html5 - 移动端H5多屏页面，如何优雅的在左右滑动时为每个页面重复加载相应的动画-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

怪我咯 2017-04-17 11:42:34

[HTML讨论组]

730

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

我的方法：

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

不足：

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

demo:

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

怪我咯

走同样的路，发现不同的人生

全部回复(1)

阿神2017-04-17 11:44:34 1楼

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

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



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

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

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>