CSS转换显示：阻止

Question

我查看了其他主题并且我做了同样的事情：添加填充，高度，不透明度。

但我没有上面的css过渡。你能告诉我为什么吗？

当我触摸一个按钮时，它会将类.show添加到我的div contactEmote：

#contactEmote{
    display: none;
    top: 0px;
    background-color: #f65b61;
    width: 100%;
    z-index: 2000;

    opacity:0;
    clear: both;
    height: 0px;
    padding: 0 8px;
    overflow: hidden;

    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;


    -webkit-box-shadow: 0px 4px 35px -1px rgba(0,0,0,0.68);
    -moz-box-shadow: 0px 4px 35px -1px rgba(0,0,0,0.68);
    box-shadow: 0px 4px 35px -1px rgba(0,0,0,0.68);
}

#contactEmote.show{
    top: 0px;
    display: block;
    height: 100px;
    opacity: 1;
    padding: 8px;
}

Answer 1

如果您在display和block之间切换none，则无法转换元素。请尝试将这些规则更改为visibility: hidden和visibility: visible。