文章/答案/技术大牛

发布

社区首页 >问答首页 >使用-webkit-transition时的文本定位

问使用-webkit-transition时的文本定位
EN

Stack Overflow用户

提问于 2018-08-12 08:07:31

回答 1查看 20关注 0票数 1

我正在尝试使一个带有文本和图像的条在单击按钮时出现(就像是一个通知)，这个条将增长，直到达到最大尺寸并显示内容，但是当动画发生时，文本正在重新定位，我希望它停止在其位置，只有条将移动。

<!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>

我尝试添加了空格: 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>

有人知道怎么帮我解决这个问题吗？

css

css-transitions

css-animations

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-12 08:12:35

您可以将文本设置为固定宽度，并禁用其上的收缩效果，以便保持固定宽度，这样文本就不会移动，您只需显示它：

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

document.querySelector('button').addEventListener('click', function() {
  notification.classList.add('show');
});

.notification {
  width: 0px;
  height: 100px;
  background: whitesmoke;
  display: flex;
  overflow: hidden;
  transition: width 2s;
}

.show {
  width: 450px;
}

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

.text {
  margin: 5px 20px;
  width:calc(450px - 70px - 2*20px); /*total width - image width - margin of image*/
  flex-shrink:0; /* avoid the width of the element to be reduced by the shrink effect*/
}

<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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51804701

复制

相似问题

问使用-webkit-transition时的文本定位
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用-webkit-transition时的文本定位EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用-webkit-transition时的文本定位
EN