Question

我一直在搜索stackoverflow一段时间了，我不认为这已经回答了。我在div上有一个条件类，当boolean变量设置为true时，它会被添加到div中。以下代码：

<div [class.modalwindow-show]="modalState" class="modals">

    [...]

</div>

当用户单击按钮时，变量设置为true，类modalwindow-show被添加到div。我的问题是，出于某种原因，css转换不起作用，背景只是在没有转换的情况下发生变化。我有这两个类：

.modals{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    transition: all .30s ease-in-out;
}

.modalwindow-show{
    background: rgba(10,10,10,0.5);
    display: block;
}

有谁知道过渡为何无效？

Answer 1

固定！

我完全删除了display：none和display：block，现在使用visibility：hidden和visibility：visible。显示覆盖了过渡。

Angular 4 |转换不适用于条件css类

1 个答案: