时间戳

首页 > 解决方案 > 如何在css中进行过渡

css - 如何在css中进行过渡

问题描述

.container {
  display: flex;
}

.item {
  width: 150px;
  border: 6px solid red;
  height: 145px;
  overflow: hidden;
  transition: 1s;
}

.item:hover {
    height: 100%;
}

.footer__item {
  background: blue;
}
<div class="container">
  <div class="item">
    <div class="item__data">
      <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam repudiandae debitis omnis itaque. Dolores quasi aliquid temporibus corporis mollitia sint.
      </div>
      <div class="footer">
        <div class="footer__item">test</div>
        <div class="footer__item">test</div>
      </div>
      </div>
  </div>
  <div class="item">
    <div class="item__data">
      <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam repudiandae debitis omnis itaque. Dolores quasi aliquid temporibus corporis mollitia sint.
      </div>
      <div class="footer">
        <div class="footer__item">test</div>
        <div class="footer__item">test</div>
        <div class="footer__item">test</div>
        <div class="footer__item">test</div>
      </div>
      </div>
  </div>
</div>

我想要，当我将鼠标悬停在我想要应用的项目时height: 100%;。下一个问题是：当我现在悬停时，不会应用过渡，但是如果我将高度从 更改为100%，250px那么过渡是否有效？为什么？以及如何为 100% 高度应用过渡？

标签： css

解决方案

浏览器不支持计算动态元素的高度（通常称为reflow）。阅读这篇参考文章https://css-tricks.com/using-css-transitions-auto-dimensions/。

试试下面的代码

.container {
  display: flex;
  transition: all 3s;
}

.item {
  width: 150px;
  transition: all 3s;
}

.content {
  height: 100%;
  border: 6px solid red;
}

.footer {
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease-out;
  overflow: hidden;
}

.item:hover .footer {
  transform: scaleY(1);
}

.footer__item {
  background: blue;
}
<div class="container">
  <div class="item">
    <div class="item__data">
      <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam repudiandae debitis omnis itaque. Dolores quasi aliquid temporibus corporis mollitia sint.
      </div>
      <div class="footer">
        <div class="footer__item">test</div>
        <div class="footer__item">test</div>
      </div>
      </div>
  </div>
  <div class="item">
    <div class="item__data">
      <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam repudiandae debitis omnis itaque. Dolores quasi aliquid temporibus corporis mollitia sint.
      </div>
      <div class="footer">
        <div class="footer__item">test</div>
        <div class="footer__item">test</div>
        <div class="footer__item">test</div>
        <div class="footer__item">test</div>
      </div>
      </div>
  </div>
</div>

推荐阅读