javascript - 是否可以使用带有 display none 的转换来显示 block

我仍在为我的网站开发一个天才论坛。我想添加一些奇特的 JavaScript 效果。我暂时不想使用 jQuery。

我的问题如下:我有一个通过检查函数值是 true 还是 false 出现的元素。通过这些检查我的文章显示或隐藏。

我的问题是:是否可以使用过渡，以便我的 block 像过渡一样下降？

第一个js函数描述了检查，下一个函数在值不为空时隐藏或显示我的文章。

    function CheckEmptyValues() {
    var inputFields = document.getElementsByTagName('input');
    var textFields = document.getElementsByTagName('textarea');
    var postData = [inputFields, textFields];

    for(var i=0; i<postData.length; i++) {
        for(var j=0; j<postData[i].length; j++) {
            if(postData[i][j].value !== '') {
                return false;
            }
        }
    }
    return true;
}

function showPreview() {
    if (CheckEmptyValues() === false) {
        this.prevPost.style.display = "block";
    }
    else {
        this.prevPost.style.display = "none";
    }
}

当我的空值为假时，文章就会出现，如果不是，它就会消失。但当这种情况发生时，你只能看到显示或隐藏，看不到进一步的效果或其他东西。

我想让这个效果像这样:http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

高度值应从 0 开始，以 150 高度或类似值结束。有谁有办法让它看起来很酷吗？

提前致谢。

最佳答案

不，你不能，display 被定义为不可动画。

如果您需要解决方法，请参阅 CSS3 Animation and Display None .

关于javascript - 是否可以使用带有 display none 的转换来显示 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28484685/