0

tenho um código em html que quando clico no botão ele abre uma modal, e dentro da modal tenho outro botão para fechar, e eu gostaria de colocar uma animação na hora de abrir e na hora de fechar, por exemplo ela ir desvanecendo ou coisa do tipo....

javascript

function openModal(){
        var i = document.getElementById('i').value;
        if (i == '0') {
            document.getElementById('i').value = '1';
            document.getElementById('modal').style = 'display: flex;';
        }else{
            document.getElementById('i').value = '0';
            document.getElementById('modal').style = 'display: none;';
        }
    }

CSS

*{margin: 0;}
    .btn {
        background: #3498db;
        background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
        background-image: -moz-linear-gradient(top, #3498db, #2980b9);
        background-image: -ms-linear-gradient(top, #3498db, #2980b9);
        background-image: -o-linear-gradient(top, #3498db, #2980b9);
        background-image: linear-gradient(to bottom, #3498db, #2980b9);
        -webkit-border-radius: 8;
        -moz-border-radius: 8;
        border-radius: 8px;
        text-shadow: 6px 3px 9px #000000;
        -webkit-box-shadow: 0px 1px 3px #000000;
        -moz-box-shadow: 0px 1px 3px #000000;
        box-shadow: 0px 1px 3px #000000;
        font-family: Arial;
        color: #ffffff;
        padding: 10px 20px 10px 20px;
        text-decoration: none;
    }

    .btn:hover {
        background: #3cb0fd;
        background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
        background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
        text-decorationecoration: none;
    }
    .modal{
        width: 100vw;
        height: 100vh;
        background: #00000078;
        display: none;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: fixed;
    }
    .window{
        width: 900px;
        height: 500px;
        background: #fff;
        border-radius: 5px;
    }
    .close_btn{
        width: 25px;
        height: 25px;
        background-image: url(image/close.png);
        background-size: 24px;
        float: right;
    }
    .close_btn:hover{
        background-image: url(image/close_hover.png);
    }
    .bar{
        background-color: black;
        height: 25px;
        border-radius: 5px 5px 0px 0px;
    }

HTML

<div class="modal" id="modal">
    <div class="window" id="window">
        <div class="bar" id="bar">
            <div class="close_btn" id="close_btn" onclick="openModal()"></div>
        </div>
        <input type="hidden" name="i" id="i" value="0">
    </div>
</div>
<input type="button" href="#" class="btn" onclick="openModal()" id="bnt" value="Upload...">

1 Resposta 1

0

Só adicionar estas propriedades no css da .modal

animation-duration: 3s;
animation-name: slidein;
animation-directioniteration-count: infinite;

e adicionar a seguinte animação no css

@keyframes slidein {
        from {
            margin-left: 100%;
            width: 300%; 
        }

        to {
            margin-left: 0%;
            width: 100%;
        }
    }

muito obrigado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .