Question

我还在为我的网站开发一个天才论坛。我想添加一些花哨的JavaScript效果。我现在不想使用jQuery。

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

我的问题是：是否可以使用转换，以便我的块像转换一样下降？

第一个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高度或类似结束。有没有人有解决方案如何使这看起来很酷？

提前致谢。

Answer 1

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

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

Answer 2

不，display没有进入transition-property。但是，您可以尝试opacity和display:block，将其放在div:hover或div css中。

Answer 3

您可以使用opacity，并将其设置为0或1：

this.prevPost.style.display = "block";
this.prevPost.style.opacity = 1;

是否可以使用显示无的转换来显示块

3 个答案: