Transizione overlay con Javascript

[BlueSmurf]

Salve ragazzi, sto creando per progetto universitario, un sito web. Nelle istruzioni del prov c'è scritto di utilizzare html css javascript (per client) e php, mysql (per server). Non sono tutti obbligatori, ma poichè ho creato un tasto 'chi siamo' con testo che viene mostrato in overlay, vorrei sapere se c'è un modo per implementare transition.
Prima utilizzavo solo html e css, ma poichè per la chiusura ero costretto a indirizzare il tasto di chiusura verso un elemento della pagina, vorrei utilizzare javascript che risulta sicuramente più elegante (o no?). Ora il popup si chiude e apre, ma non ha transizione, e non so come inserirla
Comunque vi posto in breve il mio codice

<button class="primaryButton" onclick="showPopup()">Chi Siamo</button>


<div id = "popup1" class = "overlay" style='display: none'>
            <div class = "popup">
                <h2>Chi Siamo</h2>
                <a class = "close" onclick='closePopup()'>×</a>
                <div class = "content">
                   testo overlay
                </div>
            </div>
        </div>
<script>
function showPopup(){
 document.getElementById('popup1').setAttribute('style',' opacity:1; display: block' );
     }

</script>

CSS: #popup1     {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: fixed;
        background: rgba(0, 0, 0, 0.7);
        transition: opacity 700ms;
        opacity: 0;
    }

[lucavizzi]

<button class="primaryButton" onclick="showPopup()">Chi Siamo</button>


<div id = "popup1" class = "overlay" style='visibility:hidden'>
            <div class = "popup">
                <h2>Chi Siamo</h2>
                <a class = "close" onclick='closePopup()'>×</a>
                <div class = "content">
                   testo overlay
                </div>
            </div>
        </div>
<script>
function showPopup(){
 document.getElementById('popup1').setAttribute('style',' opacity:1; visibility:visible' );
     }

</script>

CSS: #popup1     {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: fixed;
        background: rgba(0, 0, 0, 0.7);
        transition: opacity 700ms;
        opacity: 0;
    }

Il "display block" non è una proprietà che può essere "mostrata parzialmente".
Un elemento ha un display block, oppure no. Non ci sono vie di mezzo.

Utilizza al suo posto la proprietà "visibility" (hidden/visible).

[BlueSmurf]

Sì prima avevo impostato visibility:hidden e visible, ma non cambia nulla, va bene js così?

[lucavizzi]

<button class="primaryButton" onclick="showPopup()">Chi Siamo</button>


<div id = "popup1" class = "overlay" style='visibility:hidden'>
            <div class = "popup">
                <h2>Chi Siamo</h2>
                <a class = "close" onclick='closePopup()'>×</a>
                <div class = "content">
                   testo overlay
                </div>
            </div>
        </div>
<script>
function showPopup(){
 document.getElementById('popup1').setAttribute('style',' opacity:1; visibility:visible' );
     }

</script>

CSS: #popup1     {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: fixed;
        background: rgba(0, 0, 0, 0.7);
        transition: opacity 700ms;
        opacity: 0;
    }

Codice funzionante

[BlueSmurf]

Grazie Mille