Positioning text when using -webkit-transition

Navigation
1

I'm trying to make a bar with text and image appear at the click of a button (as if it were a notification), this bar will grow until reaching the maximum size and revealing the content, however while the animation happens the text goes re-positioning, I would like it to stay in place and only the bar move. 

<!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><divclass="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>

I've tried adding white-space: nowrap. 

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

It even works as I wanted it to, but if the text is too large (greater than the width of the bar) it will be hidden by the overflow: hidden property. 

<!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><divclass="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>

Does anyone know how to help me solve this?

    
asked by anonymous 11.08.2018 / 19:54

2 answers

1

I found the solution by searching a bit and the flex-shrink property solved my problem, it can disable the retraction of the text by having the value 0 assigned. I made the following change in my CSS: 

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

And it worked perfectly. 

<!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><divclass="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>
    
12.08.2018 / 02:31
1

I made an option that adds a @keyframes that has a time close to the total of your animation. At the end of this @keyframs it adds a style in the text that makes strip nowrap and lets the text break. So when class .show is invoked the class .text gets the @keyframs that will break the line in 1.35s

See the example to better understand. 

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><divclass="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>
    
11.08.2018 / 22:32
Query Oracle SQL - Subtract hours Function that generates Multiple Inputs sends only # 1. How to solve?