Positioning text when using -Webkit-Transition

Asked

Viewed 82 times

1

I’m trying to make a bar with text and image appear when clicking a button (as if it were a notification), this bar will grow until it reaches maximum size and revealing the content, but while the animation happens the text will be re-readpositioning, I would like it to stand still in its position and only the bar to 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>
      <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>

I tried to add the white-space property: nowrap.

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

It even works as I wanted to keep the text still, but if it is too big (larger 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>
      <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>

Someone knows how to help me solve this?

css css3 css-transitions

  • I wanted to know JS to give you a straight answer, but just vc make a Settimeout with the same duration of your animation and then you remove the white-space: nowrap; class . text

  • I made an option just adding an extra class in the "component" to break the line at the end of the animation.

2 answers

1

I made an option that adds one @keyframes which has a time close to the total of its animation. At the end of this @keyframs it adds a style in the text that makes strip the nowrap and lets the text break. So when the class .show the class is invoked .text receives 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>
  <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>

  • Very good, very helpful.

1


I found the solution by researching a bit and the property flex-shrink solved my problem, it can disable the retraction of 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>
      <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>

  • Turned out really good, didn’t even need the nowrap anymore

  • Another young thing, you can mark your own answer as accepted later, so it is not pending on the site with Question No Answer Accept blz

  • Yes, I have to wait two day to be able to mark it, I will do it, thanks.

Browser other questions tagged css css3 css-transitions

You are not signed in. Login or sign up in order to post.