展开收起js动画效果

展开收起js动画效果
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
开发工具与关键技术：Adobe Dreamweaver CC 2017 Java Script
作者：林敏静
撰写时间：2019年1月18日
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

这里我们来讲一下通过写js控制元素的展开收起其中的几种方法，先来看下我们的页面布局，

创建并引入一个js文件，这个步骤就不多加说明了。

首先声明我们要用到的变量，绑定按钮点击事件时一定要进行页面输出检测是否绑定成功。

当我们触发展开按钮的点击事件时，元素的高度就会发生变化，由100px变成200px，这个变化呢是从元素的下方增加高度，是一下子把增加的高度呈现出来

同时按钮会变成收起事件，同理，点击收起按钮元素就一下子回到原始的高度，这个是无动画效果的展开收起事件，是触发就即时执行的，元素高度变化过程略显生硬。

js动画效果

上面说的无动画效果的展开收起，下面我们就讲有动画效果的展开收起，这个变化过程呢看起来就舒服很多。

当你触发展开事件时，这个元素的高度就会隔30毫秒向下递增5px,直到递增到限定度，按钮就自动变成收起事件，同理，收起事件就每隔30毫秒向上递减5px直到原始高度，这个事件呢因为高度跟随时间变化而变化，所以展开收起时带有动画效果。

CSS3动画效果

上面讲的是js动画效果，再来讲CSS3动画效果，就是在元素的样式中添加transition设置变化类型，变化时长以及变化的速度，这里我们要变化的类型是元素的高度。

当触发点击展开点击事件时，元素就根据设置的变化速度在限定的时间内完成高度的变化，其呈现的效果与js动画效果一样，但两者的元素高度变化的定义不同。

定时展开收起

再有一个就是定时展开收起，当你触发展开点击事件时，页面会加载2秒后再展开元素，页面加载6秒后就会自动收起，元素高度变化效果与js动画效果相同。

注：以上为本人课堂学习总结