Question

我有一个信息框，但我希望它从左向右滑动。但是css动画以一个非常高的div开头，因为它里面有p标签。有没有办法来解决这个问题？

Html：

<div class="info-box info">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ipsam fugit vero, autem asperiores accusamus ea unde magni distinctio excepturi minus amet repudiandae, debitis nulla voluptatem earum deleniti error reiciendis!</p>
</div>

SCSS：

.info-box {
   margin: 10px 0;
   border-left: 3px solid black;
   overflow: hidden;
   display: inline-block;
   -webkit-animation: slideIn 1s linear;
   position: relative;

   p {
    display: block;
    padding: 10px 20px 10px 10px;
    margin-bottom: 0;
   }
}

@keyframes slideIn {
  0%   {max-width: 0px;}
  100% {max-width: 1000px;}
}

.info-box.info {
 background-color: lighten(blue, 24);
}

Answer 1

在段落上使用转换：

.info-box {
  margin: 10px 0;
  border-left: 3px solid black;
  -webkit-animation: slideIn 1s linear;
  position: relative;
  display: inline-block;
  overflow: hidden;
}
p {
  padding: 10px 20px 10px 10px;
  margin-bottom: 0;
  transform: translateX(-100%);
  -webkit-animation: slideIn 1s linear forwards;
}
i {
  padding-right: 15px;
}
@keyframes slideIn {
  to {
    transform: translateX(0%);
  }
}
.info-box {
  background-color: lightblue;
}

<div class="info-box info">
  <p><i class="fa fa-info"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ipsam fugit vero, autem asperiores accusamus ea unde magni distinctio excepturi minus amet repudiandae, debitis nulla voluptatem earum deleniti error reiciendis!</p>
</div>

如何用p标签向右滑动带有p标签的div用最大宽度的css动画？

1 个答案: