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?
white-space: nowrap;
da classe .texto