元素高度不固定动画

可以使用jquery的slideDown slideUp slideToggle, 下面介绍使用css3的动画方法

参考链接

#wrapper {
    height: 0;
    overflow: hidden;
    background-color: #efefef;
}

 

function funTransitionHeight(fn, element, time) {
    if (typeof window.getComputedStyle == "undefined") return;

    var height = window.getComputedStyle(element).height;
    element.style.transition = "none"; // 本行2015-05-20新增，mac Safari下，貌似auto也会触发transition, 故要none下~

    element.style.height = "auto";
    var targetHeight = window.getComputedStyle(element).height;
    element.style.height = height;
    element.offsetWidth = element.offsetWidth;
    if (time) element.style.transition = "height "+ time +"ms";
    if (fn === 'slideDown') {
        element.style.height = targetHeight;
    } else if (fn === 'slideUp') {
        element.style.height = '0';
    }
}

调用的时候：

var wrapper = document.getElementById('wrapper')
funTransitionHeight('slideDown', wrapper, 400)

有个bug：高度自适应的元素初始化为隐藏状态，第一次点击的slideDown的时候没有动画，记录一下有时间再弄...

 

 

----------------------------------------------------------------------------------------------------------------------------------------------------------

以上为分割线

2018-07-19更新

vue 点击展开收起动画

参考链接：

1. vuejs如何实现这样的展开收起动画？ 

2. vuejs实现点击展开收起动画