1

Eu estou tentando fazer uma barra com texto e imagem aparecer ao clicar em um botão (como se fosse uma notificação), essa barra vai crescendo até chegar ao tamanho máximo e revelando o conteúdo, porém enquanto a animação acontece o texto vai se re-posicionando, eu gostaria que o mesmo ficasse parado em sua posição e apenas a barra se movimentasse.

<!DOCTYPE html>
<html>
  <head>
    <style> 
      .notificacao {
          width: 0px;
          height: 100px;
          background: whitesmoke;
          display: flex;

          overflow: hidden;

          -webkit-transition: width 2s;
          transition: width 2s;
      }

      .show {
          width: 450px;
      }
 
      .avatar img {
        width: 70px;
        height: 70px;
        margin: 20px;
      }

      .text {
        margin: 5px 20px;
      }

    </style>
  </head>
  <body>

    <div class="notificacao">
      <div class="avatar">
        <img src="https://cdn.icon-icons.com/icons2/1147/PNG/512/1486486303-alert-bell-notification-education-christmas-bell-church-bell-ring_81235.png">
      </div>
      <div class="text">
        <p><strong>Chamando Notificação</strong></p>
        <p>Recebeu uma notificação de determinada pessoa - <strong>NOME DA PESSOA</strong></p>
      </div>
    </div>

    <br><br>

    <button>Notificação</button>

    <script type="text/javascript">
      let notificacao = document.querySelector('.notificacao');

      document.querySelector('button').addEventListener('click', function(){
        notificacao.classList.add('show');
      });
    </script>

  </body>
</html>

Eu tentei adicionar a propriedade white-space: nowrap.

.text {
        white-space: nowrap;
        margin: 5px 20px;
      }

Ela até funciona como eu queria mantendo o texto parado, porém se o mesmo for muito grande (maior que o width da barra) ele será escondido pela propriedade overflow:hidden.

<!DOCTYPE html>
<html>
  <head>
    <style> 
      .notificacao {
          width: 0px;
          height: 100px;
          background: whitesmoke;
          display: flex;

          overflow: hidden;

          -webkit-transition: width 2s;
          transition: width 2s;
      }

      .show {
          width: 450px;
      }
 
      .avatar img {
        width: 70px;
        height: 70px;
        margin: 20px;
      }

      .text {
        white-space: nowrap;
        margin: 5px 20px;
      }

    </style>
  </head>
  <body>

    <div class="notificacao">
      <div class="avatar">
        <img src="https://cdn.icon-icons.com/icons2/1147/PNG/512/1486486303-alert-bell-notification-education-christmas-bell-church-bell-ring_81235.png">
      </div>
      <div class="text">
        <p><strong>Chamando Notificação</strong></p>
        <p>Recebeu uma notificação de determinada pessoa - <strong>NOME DA PESSOA</strong></p>
      </div>
    </div>

    <br><br>

    <button>Notificação</button>

    <script type="text/javascript">
      let notificacao = document.querySelector('.notificacao');

      document.querySelector('button').addEventListener('click', function(){
        notificacao.classList.add('show');
      });
    </script>

  </body>
</html>

Alguém sabe como me ajudar a resolver isso?

2
  • Eu queria saber JS para te dar uma resposta direitinho, mas basta vc fazer um SetTimeOut com a mesma duração da sua animação e então vc retira o white-space: nowrap; da classe .texto
    – hugocsl
    Commented 11/08/2018 às 20:23
  • Fiz uma opção só adicionando uma classe a mais no "componente" para quebrar a linha no final da animação.
    – hugocsl
    Commented 11/08/2018 às 20:33

2 Respostas 2

1

Fiz uma opção que adiciona um @keyframes que tem um tempo próximo do total da sua animação. No final desse @keyframs ele adiciona um estilo no texto que faz tira o nowrap e deixa o texto quebrar. Assim, quando a classe .show é invocada a classe .text recebe o @keyframs que vai quebrar a linha em 1.35s

Veja o exemplo para entender melhor.

let notificacao = document.querySelector('.notificacao');

document.querySelector('button').addEventListener('click', function(){
  notificacao.classList.add('show');
});
.notificacao {
    width: 0px;
    height: 100px;
    background: whitesmoke;
    display: flex;

    overflow: hidden;

    -webkit-transition: width 2s;
    transition: width 2s;
}

.show {
    width: 450px;
}

.avatar img {
  width: 70px;
  height: 70px;
  margin: 20px;
}

.text {
  white-space: nowrap;
  margin: 5px 20px;
}
.show .text{
    animation: textox 1.35s forwards;

}
@keyframes textox {
    99% {
        white-space: nowrap;
    }
    100% {
        white-space: normal;
    }
}
<div class="notificacao">
  <div class="avatar">
    <img src="https://cdn.icon-icons.com/icons2/1147/PNG/512/1486486303-alert-bell-notification-education-christmas-bell-church-bell-ring_81235.png">
  </div>
  <div class="text">
    <p><strong>Chamando Notificação</strong></p>
    <p>Recebeu uma notificação de determinada pessoa - <strong>NOME DA PESSOA</strong></p>
  </div>
</div>

<br><br>

<button>Notificação</button>

1
  • Muito bom, ajuda bastante.
    – Marcel
    Commented 12/08/2018 às 0:27
1

Eu encontrei a solução pesquisando um pouco e a propriedade flex-shrink resolveu meu problema, ele pode desativar a retração do texto ao ter o valor 0 atribuído. Eu fiz a seguinte alteração no meu CSS:

  .text {
    margin: 5px 20px;
    width: 340px;
    flex-shrink: 0;
  }

E funcionou perfeitamente.

<!DOCTYPE html>
<html>
  <head>
    <style> 
      .notificacao {
          width: 0px;
          height: 100px;
          background: whitesmoke;
          display: flex;

          overflow: hidden;

          -webkit-transition: width 2s;
          transition: width 2s;
      }

      .show {
          width: 450px;
      }
 
      .avatar img {
        width: 70px;
        height: 70px;
        margin: 20px;
      }

      .text {
        margin: 5px 20px;
        width: 340px;
        flex-shrink: 0;
      }

    </style>
  </head>
  <body>

    <div class="notificacao">
      <div class="avatar">
        <img src="https://cdn.icon-icons.com/icons2/1147/PNG/512/1486486303-alert-bell-notification-education-christmas-bell-church-bell-ring_81235.png">
      </div>
      <div class="text">
        <p><strong>Chamando Notificação</strong></p>
        <p>Recebeu uma notificação de determinada pessoa - <strong>NOME DA PESSOA</strong></p>
      </div>
    </div>

    <br><br>

    <button>Notificação</button>

    <script type="text/javascript">
      let notificacao = document.querySelector('.notificacao');

      document.querySelector('button').addEventListener('click', function(){
        notificacao.classList.add('show');
      });
    </script>

  </body>
</html>

3
  • Ficou muito bom, nem precisou mais do nowrap né
    – hugocsl
    Commented 12/08/2018 às 1:05
  • Outra coisa jovem, vc pode marcar sua própria resposta como aceita depois, assim ela não fica pendente no site com Pergunta Sem Resposta Aceita blz
    – hugocsl
    Commented 12/08/2018 às 11:07
  • Sim, eu tenho que esperar dois dia pra poder marcá-la, farei isso, valeu.
    – Marcel
    Commented 12/08/2018 às 20:56

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 .