1

Alguem sabe como eu posso animar a passagem do dashboard para o menu? Menu são os 3 tracinhos da app e a dashboard é o que aparece quando o código é executado! Apenas uma pequena animação !

CSS | HTML

body{
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  background: #252C35;
  color: white;
}

#UpperBar{
  height: 45px;
}

.MASlime{
  position: absolute;
  font-size: 30px;
  top: 1px;
  left: 40px;
}

#Totals{
  position: absolute;
  font-size: 30px;
}

.Total{
  position: absolute;
  top: 70px;
  left: 130px;
}

.TotalEarnings{
  position: absolute;
  top: 70px;
  left: 200px;
}

.TotalO{
  position: absolute;
  top: 140px;
  left: 130px;
}

.TotalOrders{
  position: absolute;
  top: 140px;
  left: 200px;
}

#Earnings{
  position: absolute;
  top: 70px;
  left: 350px;
}

#Orders{
  position: absolute;
  top: 140px;
  left: 350px;
}

.NewOrder{
  position: absolute;
  top: 250px;
  left: 200px;
  font-size: 30px;
}

.OrderName{
  position: absolute;
  top: 350px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.OrderDate{
  position: absolute;
  top: 400px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.SKU{
  position: absolute;
  top: 450px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.SUBMIT{
  position: absolute;
  top: 500px;
  left: 220px;
  width: 100px;
  height: 40px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.Menu{
  position: absolute;
  top: 25px;
  left: 480px;
  font-size: 30px;
  cursor: pointer;
}

.menu{
  text-align: center;
  width: 100%;
  display: none;
}

.menu a{
  display: block;
  border-bottom: 1px solid #EAEAED;
  text-decoration: none;
  color: white;
  margin-top: 100px;
  padding-bottom: 10px;
  font-size: 30px;
  background: #252C35;
}

.All{
  display: block;
}

#toggle{
  display: none;
}

#toggle:checked + .menu{
  display: block;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>EComerce App Slime</title>
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <div id="menu">
      <label for="toggle" class="Menu">&#9776;</label>
      <input type="checkbox" id="toggle" onclick="meuMenuToggle()"/>
      <div class="menu">
          <a href="#">Slime Recipe</a>
      </div>
    </div>
    <div id="UpperBar">
      <p class="MASlime">MASlime</p>
    </div>
      <div id="HomePage">
        <div id="Totals">
          <p class="Total">Total</p>
          <p class="TotalEarnings">Earnings</p>
          <p class="TotalO">Total</p>
          <p class="TotalOrders">Orders</p>
          <p id="Earnings">100€</p>
          <p id="Orders">1</p>
        </div>
        <div id="NewOrder">
          <p class="NewOrder">New Order</p>
          <form id="OrderForm">
            <input class="OrderName" type="text" name="OrderName" placeholder="Buyer Name" required>
            <input class="OrderDate" type="text" name="OrderDate" placeholder="Date of Order" required>
            <input class="SKU" type="text" name="ProductSKU" placeholder="Product SKU" required>
            <input class="SUBMIT" type="button" name="Submit" value="SUBMIT">
          </form>
        </div>
    </div>
    <script>
    function meuMenuToggle() {
      var x = document.getElementById("HomePage");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
    </script>
    <script src="js/index.js"></script>
  </body>
</html>

7
  • Use a libraria Greensock, é normalmente utilizada para tal animações, tem aqui um tutorial - youtu.be/dzz8kigJqvs
    – Pona
    16/02/2019 às 22:36
  • @Pona Vou exprimentar! Entretanto se quizer dar up agradecia muito!
    – user132381
    16/02/2019 às 22:39
  • Animar tipo o que? Fazer uma transição de transparência? Aparecer vindo pela esquerda, dar um loop na tela? Vc precisa dar mais detalhes...
    – hugocsl
    16/02/2019 às 22:44
  • Você usa Jquery no seu código?
    – ElvisP
    16/02/2019 às 22:50
  • @EliseuB. Não uso muito jquery!
    – user132381
    16/02/2019 às 23:13

2 Respostas 2

4

Segue uma opção apenas com CSS

inserir a descrição da imagem aqui

Usei duas técnicas, a div .backdrop que cobre o conteúdo eu usei transition, já a lista do menu que aparece no topo eu usei um @keyframes com uma animação de opacidade.

body {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  background: #252C35;
  color: white;
}

#UpperBar {
  height: 45px;
  top: 1px;
  left: 40px;
  position: absolute;
  z-index: 2;
}

.MASlime {
  position: absolute;
  font-size: 30px;
}

#Totals {
  position: absolute;
  font-size: 30px;
}

.Total {
  position: absolute;
  top: 80px;
  left: 140px;
}

.TotalEarnings {
  position: absolute;
  top: 80px;
  left: 200px;
}

.TotalO {
  position: absolute;
  top: 150px;
  left: 140px;
}

.TotalOrders {
  position: absolute;
  top: 150px;
  left: 200px;
}

#Earnings {
  position: absolute;
  top: 80px;
  left: 350px;
}

#Orders {
  position: absolute;
  top: 150px;
  left: 350px;
}

.NewOrder {
  position: absolute;
  top: 250px;
  left: 200px;
  font-size: 30px;
}

.OrderName {
  position: absolute;
  top: 350px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.OrderDate {
  position: absolute;
  top: 400px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.SKU {
  position: absolute;
  top: 450px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.SUBMIT {
  position: absolute;
  top: 500px;
  left: 220px;
  width: 100px;
  height: 40px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.Menu {
  position: absolute;
  top: 25px;
  left: 480px;
  font-size: 30px;
  cursor: pointer;
  z-index: 3;
}

.menu {
  text-align: center;
  width: 100%;
  z-index: 3;


  position: relative;
  /* transition: all 500ms; */
  /* transform-origin: top; */
  /* transform: scaleY(0); */

  display: none;

}

.menu a {
  display: block;
  border-bottom: 1px solid #EAEAED;
  text-decoration: none;
  color: white;
  margin-top: 70px;
  padding-bottom: 10px;
  font-size: 30px;
  background: #252C35;

  z-index: 3;
  position: relative;
}

.All {
  display: block;
}

#toggle {
  display: none;
}

#toggle:checked+.menu {
  /* transform: scaleY(1); */
  display: block;
  animation: teste 500ms linear;
}

@keyframes teste {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#toggle:checked~.backdrop {
  height: 100%;
}

#toggle:checked~.All {
  /* display: none; */
}

.backdrop {
  position: fixed;
  width: 100%;
  height: 0%;
  background-color: #252C35;
  top: 0;
  left: 0;
  z-index: 1;
  transform-origin: top;
  transition: all 250ms;
}

#menu {
  /* position: relative; */
  z-index: 3;
}
<div id="menu">
    <label for="toggle" class="Menu">&#9776;</label>
    <input type="checkbox" id="toggle" />
    <div class="menu">
        <a href="#">Slime Recipe</a>
    </div>
    <div class="backdrop"></div>
</div>
<div id="UpperBar">
    <p class="MASlime">MASlime</p>
</div>
<div class="All">
    <div id="HomePage">
        <div id="Totals">
            <p class="Total">Total</p>
            <p class="TotalEarnings">Earnings</p>
            <p class="TotalO">Total</p>
            <p class="TotalOrders">Orders</p>
            <p id="Earnings">100€</p>
            <p id="Orders">1</p>
        </div>
        <div id="NewOrder">
            <p class="NewOrder">New Order</p>
            <form id="OrderForm">
                <input class="OrderName" type="text" name="OrderName" placeholder="Buyer Name" required>
                <input class="OrderDate" type="text" name="OrderDate" placeholder="Date of Order" required>
                <input class="SKU" type="text" name="ProductSKU" placeholder="Product SKU" required>
                <input class="SUBMIT" type="button" name="Submit" value="SUBMIT">
            </form>
        </div>
    </div>
</div>

4
  • Poderia dar +1 na publicação ! Pelos vistos fui ban do stack até cnseguir melhor pontoação nas publicações! Muito bom seu trabalho!
    – user132381
    17/02/2019 às 10:12
  • @DeadSec sempre que for perguntar, ou responder, tente dar os detalhes de tudo que usou, o erro que teve, e que vc precisa, sempre inclua as Tags corretas, código e se possível imagens. Com o tempo vc vai voltar a poder participar, os Moderadores costumam ser bem criteriosos para manter a qualidade das perguntas e resposta. Ma qq coisa comenta ai que tento te ajudar
    – hugocsl
    17/02/2019 às 13:09
  • Obrigado com as pessoas que deram up pude voltar a perguntar e estou a tentar ao maximo que as minhas perguntas sejam bem claras !
    – user132381
    17/02/2019 às 13:10
  • @DeadSec isso acontece, não é só com vc. Tente sempre explicar o que tentou fazer e onde teve o problema, inclua o código que consegui e explique como gostaria de resolver o problema etc... Em breve vc está de volta ;) 💪
    – hugocsl
    17/02/2019 às 13:15
2

Fiz um exemplo apenas para demonstrar como pode ser feito utilizando Javascript:

var home = document.getElementById('HomePage');
var menu = document.getElementsByClassName('menu')[0];
menu.style.display = 'none';

document.getElementById('toggle').onclick = () => {

  if (menu.style.display == 'none') setTimeout(fadeMenu, 150);
  else if(menu.style.display == 'block') setTimeout(fadeHome, 150);
}

function fadeMenu() {
  home.style.display = 'none';
  menu.classList.add('fadeIn');
  menu.style.display =  'block';
}

function fadeHome() {
  home.style.display = 'block';
  home.classList.add('fadeIn');
  menu.style.display = 'none';
}
body {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  background: #252C35;
  color: white;
}

#UpperBar {
  height: 45px;
}

.MASlime {
  position: absolute;
  font-size: 30px;
  top: 1px;
  left: 40px;
}

#Totals {
  position: absolute;
  font-size: 30px;
}

.Total {
  position: absolute;
  top: 70px;
  left: 130px;
}

.TotalEarnings {
  position: absolute;
  top: 70px;
  left: 200px;
}

.TotalO {
  position: absolute;
  top: 140px;
  left: 130px;
}

.TotalOrders {
  position: absolute;
  top: 140px;
  left: 200px;
}

#Earnings {
  position: absolute;
  top: 70px;
  left: 350px;
}

#Orders {
  position: absolute;
  top: 140px;
  left: 350px;
}

.NewOrder {
  position: absolute;
  top: 250px;
  left: 200px;
  font-size: 30px;
}

.OrderName {
  position: absolute;
  top: 350px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.OrderDate {
  position: absolute;
  top: 400px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.SKU {
  position: absolute;
  top: 450px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.SUBMIT {
  position: absolute;
  top: 500px;
  left: 220px;
  width: 100px;
  height: 40px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.Menu {
  position: absolute;
  top: 25px;
  left: 480px;
  font-size: 30px;
  cursor: pointer;
}

.menu {
  text-align: center;
  width: 100%;
}

.menu a {
  display: block;
  border-bottom: 1px solid #EAEAED;
  text-decoration: none;
  color: white;
  margin-top: 100px;
  padding-bottom: 10px;
  font-size: 30px;
  background: #252C35;
}

.All {
  display: block;
}

#toggle {
  display: none;
}

.fadeIn {
  animation: fadein 1.3s ease-in;
}

@keyframes fadein {
  0% { opacity: 0; }
  25% { opacity: 0.3; }
  50% { opacity: 0.5; }
  75% { opacity: 0.8; }
  100% { opacity: 1; }
}
<div id="menu">
  <label for="toggle" class="Menu">&#9776;</label>
  <input type="checkbox" id="toggle" />
  <div class="menu">
    <a href="#">Slime Recipe</a>
  </div>
</div>
<div id="UpperBar">
  <p class="MASlime">MASlime</p>
</div>
<div id="HomePage">
  <div id="Totals">
    <p class="Total">Total</p>
    <p class="TotalEarnings">Earnings</p>
    <p class="TotalO">Total</p>
    <p class="TotalOrders">Orders</p>
    <p id="Earnings">100€</p>
    <p id="Orders">1</p>
  </div>
  <div id="NewOrder">
    <p class="NewOrder">New Order</p>
    <form id="OrderForm">
      <input class="OrderName" type="text" name="OrderName" placeholder="Buyer Name" required>
      <input class="OrderDate" type="text" name="OrderDate" placeholder="Date of Order" required>
      <input class="SKU" type="text" name="ProductSKU" placeholder="Product SKU" required>
      <input class="SUBMIT" type="button" name="Submit" value="SUBMIT">
    </form>
  </div>
</div>

3
  • 1
    Sem precisar de jQuery muito bom
    – hugocsl
    17/02/2019 às 0:57
  • 1
    Opa, valeu Hugo!
    – LeAndrade
    17/02/2019 às 1:32
  • Poderia dar +1 na publicação ! Pelos vistos fui ban do stack até cnseguir melhor pontoação nas publicações!
    – user132381
    17/02/2019 às 10:12

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