css3特效down，如何⽤纯CSS动画实现slidedown效果？⽤纯CSS动画实现slide down想过⼏种思路：
1. 使⽤配和transition
设置定宽
默认样式为
.more {
-webkit-transition: max-height .35s ease-in-out;
-moz-transition: max-height .35s ease-in-out;
-o-transition: max-height .35s ease-in-out;
transition: max-height .35s ease-in-out;
max-height: 0;
overflow: hidden;
}
.more.active {
max-height: 1000px;
}
上⾯使⽤的固定的max-height，但是会影响动画效果，另外如果⾼度⼤于指定⾼度会显⽰不全，所以不能使⽤此⽅案。
通过JS动态设置max-height
之前尝试设置max-height:100%，但是⽆效。但是如何能够动态设置实际height为max-height是个问题，⽬前我是通过获取元素的scrollHeight来设置为max-height，实现动画效果，但是需要js操作是不特别爽，这样的话我不如直接使⽤js动画库了。
2. 如果没好的⽅案就考虑使⽤js动画库来实现了。
所以如果有合适的js动画库也推荐下吧
期待解答，谢谢⼤家~
===== 补充下我最后的解决⽅案吧 =====
因为考虑到兼容性选择(包括IE8)使⽤JS动画，为了不引⼊新的animal库，使⽤了⽬前所⽤mootools-more⾃带的slide。
简单看了下实现原理(因为⽬前项⽬⽤的版本为V1.4.5，所以看得是这个版本的代码)
关键的两个⽂件：Fx.Slide.js，Fx.js
#Fx.Slide.js
/**
1. 使⽤wrapper包裹element
2. 如果是⽔平滑动，设置wrapper: width:0, overflow: hidden
设置element动画为 margin-left:0 - element.width
3. 如果是垂直滑动，设置wrapper: height: 0, overflow: hidden
js控制css3动画触发设置element动画为 margin-top:0 - element.height;
*/
if (!wrapper) wrapper = new Element('div', {
styles: styles
}).wraps(element);
#Fx.js
/**
负责动画的实现
每⼀个fps对应⼀个instance，每次执⾏对应的loop，loop依次调⽤动画队列的step */
var instances = {}, timers = {};
var loop = function(){
var now = w();
for (var i = this.length; i--;){
var instance = this[i];
if (instance) instance.step(now);
}
};
var pushInstance = function(fps){
var list = instances[fps] || (instances[fps] = []);
list.push(this);
if (!timers[fps]) timers[fps] = loop.und(1000 / fps), list); };
var pullInstance = function(fps){
var list = instances[fps];
if (list){
if (!list.length && timers[fps]){
delete instances[fps];
timers[fps] = clearInterval(timers[fps]);
}
}
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。