是否可以使用不显示的转换来显示块答案

【问题标题】：Is it possible to use transitions with display none to display block是否可以使用不显示的转换来显示块
【发布时间】：2015-04-13 14:45:01
【问题描述】：

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

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

我的问题是：是否可以使用转场让我的块像转场一样下降？

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

    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";
    }
}

当我的 emptyvalues 为 false 时，文章会出现，如果不是，则会消失。但是当这种情况发生时，您只会看到显示或隐藏，没有进一步的效果或其他东西。

我想做出这样的效果：http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

高度值应该以 0 开始，以 150 高度或类似的值结束。有没有人有办法让这个看起来很酷？

提前致谢。

【问题讨论】：

标签： javascript css transition

【解决方案1】：

不，display 不会出现在 transition-property 中。但是，您可以尝试 opacity 和 display:block ，将其放入您的 div:hover 或仅 div css。

【讨论】：

对不起，不是visibility ，是opacity
div 是通过 display:none 隐藏的，而不是 opacity:0 隐藏的，所以我不明白你的意思？
那个效果不是我要的:) 你可以对比一下jQuery的动画功能
我的意思是如果你想要过渡，使用opacity 属性而不是display 并根据你的要求使文本出现在block 中，在:hover css 中使其@ 987654335@。看fiddle now
jsfiddle.net/3k2La5ok/6 当您在输入字段中输入内容时，您会看到隐藏并显示一个 div

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：