我试图在单击按钮时显示一个带有文本和图像的栏(好像它是一个通知),这个栏会增长直到达到最大尺寸并显示内容,但是当动画发生时,文本会重新定位,我希望它停在它的位置,只有酒吧会移动。
<!DOCTYPE html>
<html>
<head>
<style>
.notification {
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="notification">
<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>Call Notification</strong></p>
<p>Receive a notification by a determinate person - <strong>PERSON NAME</strong></p>
</div>
</div>
<br><br>
<button>Notify</button>
<script type="text/javascript">
let notification = document.querySelector('.notification');
document.querySelector('button').addEventListener('click', function(){
notification.classList.add('show');
});
</script>
</body>
</html>
我试过添加 white-space: nowrap 属性。
.text {
white-space: nowrap;
margin: 5px 20px;
}
它甚至可以按照我想要的方式工作,但是如果文本太大(大于条的宽度),它将被 overflow: hidden 属性隐藏。
<!DOCTYPE html>
<html>
<head>
<style>
.notification {
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="notification">
<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>Call Notification</strong></p>
<p>Receive a notification by a determinate person - <strong>PERSON NAME</strong></p>
</div>
</div>
<br><br>
<button>Notify</button>
<script type="text/javascript">
let notification = document.querySelector('.notification');
document.querySelector('button').addEventListener('click', function(){
notification.classList.add('show');
});
</script>
</body>
</html>
有谁知道如何帮助我解决这个问题?