0

Estou com um problema em utilizar animação no css

quando eu clico nos botões login e sing Up pela primeira vez funciona normalmente, porém quando volto a clicar em qualquer um desse botões a animação não funciona, já tentei usar ClassList.remove("classe") porém não consegui resolver.

var changeToLogin = document.getElementById("loginBtn");
var animation = document.getElementById("divAnimation");
var changeToSingUp = document.getElementById("singUpBtn");

changeToLogin.addEventListener('click', function() {
	animation.classList.add("animationToRight");
	animation.classList.add("animationToRight");

  console.log("clicado");
});

changeToSingUp.addEventListener('click', function() {
	animation.classList.add("animationToLeft");
	animation.classList.remove("animationToRight");
  console.log("clicado");
});
h2 {

  font-size: 28px;
  color: #C1C4D6;
}
p{
  font-size: 14px;
  color: #C1C4D6;
  padding: 15px 0px 20px;
  display: block;


}

.retangle {

  padding-top: 50px;
  padding-left: 100px;
  padding-right: 100px;
  height: 300px;
  width: 600px;
  line-height: 50px;
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -400px;
  background-color: rgb(0, 0, 0, 0.55);
  border-radius: 3px;
  opacity: 0.90;
}

.questionSingUp {
  position: absolute;
  border:solid 1px;
  border-color: red;
  width: 270px;
  height: 200px;

}

.questionLogin {
  position: relative;
  border:solid 1px;
  border-color: pink;
  width: 270px;
  height: 200px;
  float: right;
}

.actionSingUp {
position: absolute;
border:solid 1px purple;
width: 270px;
height: 100px;
background-color: rgb(58,58,58);
}

.actionSingIn {
position: relative;
margin-left: 329px;
border:solid 1px green;
width: 270px;
height: 100px;
background-color: rgb(58,58,58);
}

.loginActionWrap {
  height: 450px;
  width: 370px;
  line-height: 50px;
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  margin-top: -400px;
  margin-left: -365px;
  background-color: rgb(255,255,255);
  border-radius: 3px;
  box-shadow: 0 0 10px 3px rgba(39, 37, 37, 0.45);
  

}
#singUpBtn{
  display: inline-block;
  border: solid 1px #C3C3C3;
  color: #C3C3C3;
  min-width: 140px;
  border-radius: 5px;
  line-height: 31px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;

}

#loginBtn {
  display: inline-block;
  border: solid 1px #C3C3C3;
  color: #C3C3C3;
  min-width: 140px;
  border-radius: 5px;
  line-height: 31px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}


.animationToRight {
  -webkit-animation: mymoveRight 5s ; /* Safari 4.0 - 8.0 */
  animation: mymoveRight 1.3s ;
  -webkit-animation-fill-mode: forwards;
}

.animationToLeft {
  -webkit-animation: mymoveLeft 5s ; /* Safari 4.0 - 8.0 */
  animation: mymoveLeft 1.3s ;
  -webkit-animation-fill-mode: forwards;
}

/* Safari 4.0 - 8.0 */


@keyframes mymoveRight {
    from {left: 635px;}
    to {left: 990px;}
}

@keyframes mymoveLeft {
    from {left: 990px;}
    to {left: 635px;}
}
<html><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>particles.js</title>
  <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
  <meta name="author" content="Vincent Garreau" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" media="screen" href="css/style.css">
  <link rel="stylesheet" media="screen" href="css/login.css">
</head>
<body>
<!-- particles.js container -->
<div id="particles-js">
<!--Login-->
  <div class="retangle">
    <div class="questionSingUp">
      <h2><span>Have an accont</span> ?</h2>
      <p><span>Lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames</span></p>

      <a href="#" id="singUpBtn"> <span>Sing up</span> </a>
    </div>

    
    <div class="questionLogin">
      <h2><span>Have an accont</span> ?</h2>
      <p><span>Lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames</span></p>

      <a href="#" id="loginBtn"><span>Log in</span></a>
    </div>
    <div class="actionSingUp">
      <!--<form action="#">
        <fieldset>
          <legend class="title">Sing Up</legend>

          <div class="inputBlock">


            <div class="inputWrap">
              <input type="text" id="singName" class="input" placeholder="Full Name">
              <label for="singName" class="labelEmail"></label>
            </div>
            <div class="inputWrap">
              <input type="text" id="singEmail" class="input" placeholder="Email">
              <label for="singEmail" class="labelEmail"></label>
            </div>
            <div class="inputWrap">
              <input type="password" id="singPass" class="input" placeholder="Passeord">
              <label for="singPass" class="labelEmail"></label>
            </div>


          </div>

          <input type="submit" value="Sing Up" class="BtnSingUp">
        </fieldset>
      </form>-->
    </div>

    <div class="actionSingIn">

      <!--<form action="#">
        <fieldset>
          <legend class="title">Sing Up</legend>

          <div class="inputBlock">


            <div class="inputWrap">
              <input type="text" id="singName" class="input" placeholder="Full Name">
              <label for="singName" class="labelEmail"></label>
            </div>
            <div class="inputWrap">
              <input type="text" id="singEmail" class="input" placeholder="Email">
              <label for="singEmail" class="labelEmail"></label>
            </div>
            <div class="inputWrap">
              <input type="password" id="singPass" class="input" placeholder="Passeord">
              <label for="singPass" class="labelEmail"></label>
            </div>


          </div>
          <a href="#" class="forgotPass"><span>Forgot password</span> ?</a>
          <input type="submit" value="Sing Up" class="BtnSingUp">
        </fieldset>
      </form>-->

    </div>

  </div>
  <div id="divAnimation" class="loginActionWrap"></div>
</div>


<!--End Login-->

<!-- scripts -->
<script src="../particles.js"></script>
<script src="js/app.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>

<!-- stats.js -->
<script src="js/lib/stats.js"></script>
<script src="js/funcionalidade.js"></script>

</body>
</html>

1 Resposta 1

4

Fácil, pense comigo apertei no botão Login a animação tem que ir para a direita então.

animation.classList.add("animationToRight");

Ok, a animação foi para a direita, mas agora vamos apertar no botão Sing Up a animação tem que volta para a esquerda então.

animation.classList.add("animationToLeft");

Só que neste caso as animações só serão executadas apenas uma unica vez. Para isso não acontecer quando você clicar em um botão você tem que adicionar e remover a outra animação. Para isso, só fazer isso, para o botão Login.

animation.classList.add("animationToRight");
animation.classList.remove("animationToLeft");

E para o botão Sing Up.

animation.classList.add("animationToLeft");
animation.classList.remove("animationToRight");

Quando você apertar no botão Login a animação vai ir para a direita e vai remover a animação da esquerda caso se tiver. Quando apertar no botão Sign Up a animação da esquerda vai ser adicionada e a animação da direita sera removida. Só isso, e vai ficar neste loop segue o código.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>particles.js</title>
  <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
  <meta name="author" content="Vincent Garreau" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" media="screen" href="css/style.css">
  <link rel="stylesheet" media="screen" href="css/login.css">
  <style>
h2 {

font-size: 28px;
color: #C1C4D6;
}
p{
font-size: 14px;
color: #C1C4D6;
padding: 15px 0px 20px;
display: block;


}

.retangle {

padding-top: 50px;
padding-left: 100px;
padding-right: 100px;
height: 300px;
width: 600px;
line-height: 50px;
text-align: center;
position: relative;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -400px;
background-color: rgb(0, 0, 0, 0.55);
border-radius: 3px;
opacity: 0.90;
}

.questionSingUp {
position: absolute;
border:solid 1px;
border-color: red;
width: 270px;
height: 200px;

}

.questionLogin {
position: relative;
border:solid 1px;
border-color: pink;
width: 270px;
height: 200px;
float: right;
}

.actionSingUp {
position: absolute;
border:solid 1px purple;
width: 270px;
height: 100px;
background-color: rgb(58,58,58);
}

.actionSingIn {
position: relative;
margin-left: 329px;
border:solid 1px green;
width: 270px;
height: 100px;
background-color: rgb(58,58,58);
}

.loginActionWrap {
height: 450px;
width: 370px;
line-height: 50px;
text-align: center;
position: relative;
top: 50%;
left: 50%;
margin-top: -400px;
margin-left: -365px;
background-color: rgb(255,255,255);
border-radius: 3px;
box-shadow: 0 0 10px 3px rgba(39, 37, 37, 0.45);


}
#singUpBtn{
display: inline-block;
border: solid 1px #C3C3C3;
color: #C3C3C3;
min-width: 140px;
border-radius: 5px;
line-height: 31px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;

}

#loginBtn {
display: inline-block;
border: solid 1px #C3C3C3;
color: #C3C3C3;
min-width: 140px;
border-radius: 5px;
line-height: 31px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}


.animationToRight {
-webkit-animation: mymoveRight 5s ; /* Safari 4.0 - 8.0 */
animation: mymoveRight 1.3s ;
-webkit-animation-fill-mode: forwards;
}

.animationToLeft {
-webkit-animation: mymoveLeft 5s ; /* Safari 4.0 - 8.0 */
animation: mymoveLeft 1.3s ;
-webkit-animation-fill-mode: forwards;
}

/* Safari 4.0 - 8.0 */


@keyframes mymoveRight {
  from {left: 635px;}
  to {left: 990px;}
}

@keyframes mymoveLeft {
  from {left: 990px;}
  to {left: 635px;}
}      
  </style>
</head>
<body>
<!-- particles.js container -->
<div id="particles-js">
<!--Login-->
  <div class="retangle">
    <div class="questionSingUp">
      <h2><span>Have an accont</span> ?</h2>
      <p><span>Lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames</span></p>

      <a href="#" id="singUpBtn"> <span>Sing up</span> </a>
    </div>

    
    <div class="questionLogin">
      <h2><span>Have an accont</span> ?</h2>
      <p><span>Lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames</span></p>

      <a href="#" id="loginBtn"><span>Log in</span></a>
    </div>
    <div class="actionSingUp">
      <!--<form action="#">
        <fieldset>
          <legend class="title">Sing Up</legend>

          <div class="inputBlock">


            <div class="inputWrap">
              <input type="text" id="singName" class="input" placeholder="Full Name">
              <label for="singName" class="labelEmail"></label>
            </div>
            <div class="inputWrap">
              <input type="text" id="singEmail" class="input" placeholder="Email">
              <label for="singEmail" class="labelEmail"></label>
            </div>
            <div class="inputWrap">
              <input type="password" id="singPass" class="input" placeholder="Passeord">
              <label for="singPass" class="labelEmail"></label>
            </div>


          </div>

          <input type="submit" value="Sing Up" class="BtnSingUp">
        </fieldset>
      </form>-->
    </div>

    <div class="actionSingIn">

      <!--<form action="#">
        <fieldset>
          <legend class="title">Sing Up</legend>

          <div class="inputBlock">


            <div class="inputWrap">
              <input type="text" id="singName" class="input" placeholder="Full Name">
              <label for="singName" class="labelEmail"></label>
            </div>
            <div class="inputWrap">
              <input type="text" id="singEmail" class="input" placeholder="Email">
              <label for="singEmail" class="labelEmail"></label>
            </div>
            <div class="inputWrap">
              <input type="password" id="singPass" class="input" placeholder="Passeord">
              <label for="singPass" class="labelEmail"></label>
            </div>


          </div>
          <a href="#" class="forgotPass"><span>Forgot password</span> ?</a>
          <input type="submit" value="Sing Up" class="BtnSingUp">
        </fieldset>
      </form>-->

    </div>

  </div>
  <div id="divAnimation" class="loginActionWrap"></div>
</div>


<!--End Login-->

<!-- scripts -->
<script src="../particles.js"></script>
<script src="js/app.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>

<!-- stats.js -->
<script src="js/lib/stats.js"></script>
<script src="js/funcionalidade.js"></script>

<script>

var changeToLogin = document.getElementById("loginBtn");
var animation = document.getElementById("divAnimation");
var changeToSingUp = document.getElementById("singUpBtn");

changeToLogin.addEventListener('click', function() {
	animation.classList.add("animationToRight");
	animation.classList.remove("animationToLeft");

  console.log("clicado");
});

changeToSingUp.addEventListener('click', function() {
	animation.classList.add("animationToLeft");
	animation.classList.remove("animationToRight");
  console.log("clicado");
});

</script>

</body>
</html>

2
  • Sim, está correto, só agora que vim ver que eu estava colocando 2 clasList.add no login kkkkkk Commented 8/08/2019 às 16:37
  • de qualquer forma agradeço muito Commented 8/08/2019 às 16:37

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 .