css - 为什么当我向其中添加类时我的 css 转换不起作用

Question

所以我正在制作一个模态框，我想要一个在您单击它时添加叠加层的按钮。所以我做了覆盖这里的css：

.overlay{
    background-color: rgba(0, 0, 0, .5);
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0;
    display: none;
    transition: all 2s;
}

然后我在一个元素的新闻中添加了这个类

.oa{
    opacity: 1;
    display: block;

}

这是html

div id="maincon">
 <div class="overlay"></div>
<div id="secmaincon">
<div class="container">

    <div class="formtitle"><h1>Add Book</h1></div>
    <form action="" method="post" class="inputs"> {% csrf_token %}
    <div class="inputs">
        {% for field in form %}

        <div class="input">
        <label for="" class="labelinput">{{field.label}}</label>
        {{field}}
        </div>

        {% endfor %}
        <div class="input">
        <button type="submit">Submit</button>
        </div>
    </div>
    </form>
    
    

</div>
<div class="gc">
    <div class="grid">
        <div class="data" id="test">
            <div class="num"><p>1</p></div>
            <div class="title"><p>Crush It</p></div>
            <div class="author"><p>Gary Vaynerchunk</p></div>
            <div class="ISBN"><p>132132312</p></div>
        </div>
        <div class="data">
            <div class="num"><p>2</p></div>
            <div class="title"><p>Crush It</p></div>
            <div class="author"><p>Gary Vaynerchunk</p></div>
            <div class="ISBN"><p>132132312</p></div>
        </div>
        <div class="data">
            <div class="num"><p>3</p></div>
            <div class="title"><p>Crush It</p></div>
            <div class="author"><p>Gary Vaynerchunk</p></div>
            <div class="ISBN"><p>132132312</p></div>
        </div>
    </div>
</div>
</div>

<script src='{% static "js/booklist.js" %}'></script>
</div>

javascript 完成了它的工作并添加了类。一切正常，只是没有发生过渡，它只是呈现出一个没有过渡的大黑屏。有没有我写的阻止它的css代码？

标签： css