How to reverse the animation of a Modal?

Question

How to reverse the animation of a Modal?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a CSS code that makes an animation of a modal descend and stay in the middle of the screen, now I needed to reverse this animation, I need the modal that is in the middle of the screen to rise and disappear.

What information should I change to do the reverse?
It is not necessary to delete the current codes, I intend to take advantage of them in another part of the application, I would need new classes to do the reverse of the current one.

Follow the code:

a {
    color: #92badd;
    display:inline-block;
    text-decoration: none;
    font-weight: 400;
}

.wrapper {
    display: flex;
    align-items: center;
    flex-direction: column; 
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 20px;
}

#formContent {
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    background: #fff;
    padding: 30px;
    width: 90%;
    max-width: 400px;
    position: relative;
    padding: 0px;
    -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    text-align: center;
}

#formContent img {
    width: 150px; 
    height: 80px; 
    margin-top: 20px; 
    margin-bottom: 20px;
}

input[type=button], input[type=submit], input[type=reset]  {
    background-color: #56baed;
    border: none;
    color: white;
    height: 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    width: 85%;
    font-size: 13px;
    -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    margin: 5px 20px 40px 20px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
    background-color: rgb(27, 150, 216);
}

input[type=text], input[type=password] {
    background-color: #f6f6f6;
    color: #0d0d0d;
    height: 50px;
    border: 0px;
    text-align: center;
    font-size: 16px;
    margin: 5px;
    width: 85%;
    background-color: rgb(245, 245, 245);
    border: 1px solid white;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

input[type=text]:focus, input[type=password]:focus {
    background-color: white;
    border: 1px solid #5fbae9;
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.fadeIn.first {
    -webkit-animation-delay: 0.25s;
    -moz-animation-delay: 0.25s;
    animation-delay: 0.25s;
}

.fadeIn.second {
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

<body>
    <div id="teste" class="wrapper fadeInDown">
        <div id="formContent">
            <div class="fadeIn first">
                <img src="img/logo.png">
            </div>
            <div>
                <input type="text" class="fadeIn second" name="iptUserLogin" placeholder="Usuário" required>
                <input type="text" class="fadeIn second" name="iptSenhaLogin" placeholder="Senha" required>
                <input type="button" class="fadeIn second" name="btnLogin" value="Entrar">
            </div>
        </div>
    </div>
</body>

html css css3

asked by anonymous 11.06.2018 / 02:57

2 answers

0

With the fadeOut animation, you need to change the class that the HTML element is assigned, from fadeIn to fadeOut. For this, you can use javascript.

function mudarClasse() {
    document.getElementById("fade").className = "fade-out"
}

#fade { transition: 2s; }
.fade-out { opacity: 0; }
.fade-in { opacity: 1; }

<p id='fade' class='fade-in'>Texto</p>

<button onClick='mudarClasse()'>FadeOut</button>

Just change according to your code, create a new animation for the fade-out, etc.

11.06.2018 / 03:05

Reflect caching java, how to do? triangle effect in div with css3, how?

score 1 · Accepted Answer

You can do this by using the animation-direction: reverse; property

.fadeAlternate {
    animation: fadeInDown 1s forwards reverse;
}

Example, create a class designed to do the reverse of the animation ( fadeAlternate ), and trigger it when a specific element like the Login for example.
In this example we will simply point to the formContent id since it is on hand for demonstration purposes without changing the HTML to make it clearer.

code reduced for demonstration purposes

// Adiciona a class "fadeAlternate" com Javascript no clique
var x = document.getElementById('formContent');
x.addEventListener('click', function(){
	x.classList.add('fadeAlternate');
});

/* Código Relevante */

.fadeInDown {
    animation: fadeInDown 1s;
}
.fadeAlternate {
    animation: fadeInDown 1s forwards reverse;
}




/* RESTO */
a {
    color: #92badd;
    display:inline-block;
    text-decoration: none;
    font-weight: 400;
}

.wrapper {
    display: flex;
    align-items: center;
    flex-direction: column; 
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 20px;
}

#formContent {
    border-radius: 10px 10px 10px 10px;
    background: #fff;
    padding: 30px;
    width: 90%;
    max-width: 400px;
    position: relative;
    padding: 0px;
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    text-align: center;
}

#formContent img {
    width: 150px; 
    height: 80px; 
    margin-top: 20px; 
    margin-bottom: 20px;
}

input[type=button], input[type=submit], input[type=reset]  {
    background-color: #56baed;
    border: none;
    color: white;
    height: 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    width: 85%;
    font-size: 13px;
    box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    border-radius: 5px 5px 5px 5px;
    margin: 5px 20px 40px 20px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
    background-color: rgb(27, 150, 216);
}

input[type=text], input[type=password] {
    background-color: #f6f6f6;
    color: #0d0d0d;
    height: 50px;
    border: 0px;
    text-align: center;
    font-size: 16px;
    margin: 5px;
    width: 85%;
    background-color: rgb(245, 245, 245);
    border: 1px solid white;
    transition: all 0.5s ease-in-out;
    border-radius: 5px 5px 5px 5px;
}

input[type=text]:focus, input[type=password]:focus {
    background-color: white;
    border: 1px solid #5fbae9;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
    opacity:0;
    animation:fadeIn ease-in 1s forwards;
}

.fadeIn.first {
    animation-delay: 0.25s;
}
.fadeIn.second {
    animation-delay: 0.5s;
}

<div id="teste" class="wrapper fadeInDown">
  <div id="formContent">
    <div class="fadeIn first">
      <img src="img/logo.png">
    </div>
    <div>
      <input type="text" class="fadeIn second" name="iptUserLogin" placeholder="Usuário" required>
      <input type="text" class="fadeIn second" name="iptSenhaLogin" placeholder="Senha" required>
      <input type="button" class="fadeIn second" name="btnLogin" value="Entrar">
    </div>
  </div>
</div>