怎么样去实现一个页面的切换动画？

Question

我想实现一个动画效果，首页是背景图，登陆和注册按钮，点击登陆或注册按钮，首页淡出。
接着注册或登陆界面淡入。

我的dom结构类似于

<div id="container">
    <div id="homePage"><button></button></div>
    <div id="logPage"></div>
</div>

登陆和注册按钮在#homePage下，用css动画，opacity可以做，但是怎么选择父级节点比较好？
如果用js动画，怎样控制用js控制动画的淡入淡出？

谢谢大家。

p.s.使用原生js。

Answer 1

之前项目里做过一个类似的，你只要吧动画改一改就行了。基于jq，基于原生的话你可以直接使用keyframe配合opacity去实现
登录页动画

Answer 2

给淡入淡出的元素设置动画样式的class吧

Answer 3

js控制淡入淡出，就是利用定时器结合opacity属性的改变来实现的，或者你也可以使用游戏动画常用的requestAnimationFrame方法。