如何用HTML、CSS3和JavaScript做出下图的展开、收起的动画？

html-css011

如何用HTML、CSS3和JavaScript做出下图的展开、收起的动画？,第1张

这样就是一个展开收缩的效果了

<body>

<div id="div1">

<ul>

<li></li>

</ul>

</div>

<script>

var oDiv = document.getElementById('div1')

var oUl = oDiv.getElementsByTagName('ul')[0]

var Off = true

oDiv.onclick = function(){

if(Off){

oUl.style.display = "block"

Off = false

}else{

oUl.style.display = "none"

Off = true

}

}

</script>

HTML5+CSS3做一个后台管理系统的侧边导航栏，点击三条杠，可以收起或展开侧边导航栏。收起时，图标变大，文本在图标下方，管理员头像右侧的欢迎语隐藏；展开时图标变小，文本在图标的右侧显示，管理员头像右侧的欢迎语显示。切换过程伴有过渡动画，右侧内容区可以放自己的内容。

效果：

源码：

      移动端开发过程中，前端在请求后台的数据时，为了用户体验更加完善，通常需要分页请求，在点击展开时以往我常常喜欢直接将数据全部加载，给用户的体验以及页面效果非常不好，点击收起时也是如此，为了提升用户体验以及页面美观，我们可以采用css3中的transition在交互中使用渐进动画。demo如下：

演示实例如下图所示：

在具体的项目运用过程中只需要给id为more的div一个高度，具体高度根据页面情况而定，当然有很多不同的方式来达到交互效果，对css动画不是很了解，采用了一种最简单的方式，欢迎各位大神指教。