使用 CSS 而不是 Javascript 的高度过渡？

Question

我用 HTML 和 CSS 制作了这些卡片。对于高度转换，我使用了 javascript，但有时取决于页面，它的运行速度非常慢。有没有办法在没有我的 javascript 代码的情况下用 CSS 编写这个动画函数？ 2. 问题 我在 JS 中设置了从 110px 到 160px 的高度提升，是否可以提高框的高度取决于文本的高度，所以如果隐藏的文本更多，框会升高更多？

$('#dynamic-cards .card-box').hover(function(){
   $(this).find('.description').animate({
        'height': '160px'
    }, 500);
},function(){
  $(this).find('.description').animate({
        'height': '110px'
    }, 300);
}).trigger('mouseleave');

#dynamic-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1000px;
}
#dynamic-cards .card-box {
  position: relative;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  z-index: 1;
  display: block;
  background: #ffffff;
  height: 450px;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

#dynamic-cards .card-box:hover .card-pic img,
#dynamic-cards .hover .card-pic img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transform: scale(1.1);
  opacity: 0.6;
}

#dynamic-cards .card-box .card-pic {
  background: #000000;
  overflow: hidden;
}

#dynamic-cards .card-box .card-pic img {
  display: block;
  max-width: 300px;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

#dynamic-cards .card-box .card-box-content {
  position: absolute;
  bottom: 0;
  background-color: #EFEFEF;
  width: 100%;
  padding: 15px 15px 0px 15px;
  -webkti-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
  -moz-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
  -ms-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
  -o-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
  transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
}

#dynamic-cards .card-box .card-box-content .category {
  position: absolute;
  top: -34px;
  left: 0;
  background: #002776;
  padding: 10px 15px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

#dynamic-cards .card-box .card-box-content .title {
  margin: 0;
  padding: 0 0 10px;
  margin-top: 10px;
  color: #002776;
  font-size: 26px;
  font-weight: 700;
}

#dynamic-cards .card-box .card-box-content .sub_title {
  margin: 0;
  padding: 0 0 20px;
  color: #002776;
  font-size: 20px;
  font-weight: 400;
}

#dynamic-cards .card-box .card-box-content .description {
  height: 105px;
  color: black;
  font-size: 15px;
  line-height: 1.4em;
  padding-bottom: 0px !important;
}

#dynamic-cards .card-box .card-box-content .card-box-footer {
  font-size: 14px;
  height: 20%;
  position: relative;
  background-color: #EFEFEF;
  padding-bottom: 27px;
  margin: 0px;
}

#dynamic-cards .card-box .card-box-content .card-box-footer a {
  color: white;
  background-color: #002776;
  padding: 10px;
  font-weight: bold;
}

#dynamic-cards .card-box .card-box-content .card-box-footer a:hover {
  background-color: #009fda;
}

#dynamic-cards .hover .card-box-content .description {
  display: block !important;
  height: auto !important;
  opacity: 1 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dynamic-cards">
    <!-- Card-->
    <div class="card-box mb-3">
        <!-- Bild-->
        <div class="card-pic">
            <img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Grey_squirrel_400px.jpg">
        </div>
        <!--  Content-->
        <div class="card-box-content">
            <h2 class="title">Headline</h2>
            <p class="description" style="height: 110px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
                eos et accusam et justo duo dolores et ea rebum.</p>
            <div class="card-box-footer">
                <br>
                <a href="htttps://www.hays.de" target="_blank">Button</a>
            </div>
        </div>

    </div>

    <!-- Card-->
    <div class="card-box mb-3">
        <!-- Bild-->
        <div class="card-pic">
            <img src="https://blog.tappenbeck.net/wp-content/uploads/2013/07/400px-Smiley_icon.svg_.png">
        </div>
        <!--  Content-->
        <div class="card-box-content">
            <h2 class="title">Headline</h2>
            <p class="description" style="height: 110px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
                eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
                Lorem ipsum dolor sit amet.</p>
            <div class="card-box-footer">
                <br>
                <a href="https://www.hays.de" target="_blank">Button</a>
            </div>
        </div>
    </div>

    <!-- Card-->
    <div class="card-box mb-3">
        <!-- Bild-->
        <div class="card-pic">
            <img src="https://upload.wikimedia.org/wikipedia/commons/3/36/Brooks_Range-400px.jpg">
        </div>
        <!--  Content-->
        <div class="card-box-content">
            <h2 class="title">Headline</h2>
            <p class="description" style="height: 110px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
                eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.</p>
            <div class="card-box-footer">
                <br>
            </div>
        </div>
    </div>
</div>

https://codepen.io/rahman23/pen/MWweeoN

Answer 1

您可以通过将转换添加到您的 .description 类并添加以下 css 代码来做到这一点：

#dynamic-cards .card-box:hover .card-box-content .description {
    height: 160px;
}

关于你的第二个问题，我前不久自己搜索了很多，没有找到好的答案。如果你给你的盒子自动设置高度，它将捕捉到 100% 的高度。如果您知道盒子的最大高度，则可以使用最大高度而不是高度本身。查看这篇文章https://css-tricks.com/using-css-transitions-auto-dimensions/

#dynamic-cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 1000px;
    }
    #dynamic-cards .card-box {
        position: relative;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        z-index: 1;
        display: block;
        background: #ffffff;
        height: 450px;
        -webkit-transition: all 0.3s linear 0s;
        -moz-transition: all 0.3s linear 0s;
        -ms-transition: all 0.3s linear 0s;
        -o-transition: all 0.3s linear 0s;
        transition: all 0.3s linear 0s;
    }

    #dynamic-cards .card-box:hover .card-pic img,
    #dynamic-cards .hover .card-pic img {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 0.6;
    }

    #dynamic-cards .card-box .card-pic {
        background: #000000;
        overflow: hidden;
    }

    #dynamic-cards .card-box .card-pic img {
        display: block;
        max-width: 300px;
        -webkit-transition: all 0.3s linear 0s;
        -moz-transition: all 0.3s linear 0s;
        -ms-transition: all 0.3s linear 0s;
        -o-transition: all 0.3s linear 0s;
        transition: all 0.3s linear 0s;
    }

    #dynamic-cards .card-box .card-box-content {
        position: absolute;
        bottom: 0;
        background-color: #EFEFEF;
        width: 100%;
        padding: 15px 15px 0px 15px;
        -webkti-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
        -moz-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
        -ms-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
        -o-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
        transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
    }

    #dynamic-cards .card-box .card-box-content .category {
        position: absolute;
        top: -34px;
        left: 0;
        background: #002776;
        padding: 10px 15px;
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
    }

    #dynamic-cards .card-box .card-box-content .title {
        margin: 0;
        padding: 0 0 10px;
        margin-top: 10px;
        color: #002776;
        font-size: 26px;
        font-weight: 700;
    }

    #dynamic-cards .card-box .card-box-content .sub_title {
        margin: 0;
        padding: 0 0 20px;
        color: #002776;
        font-size: 20px;
        font-weight: 400;
    }

    #dynamic-cards .card-box .card-box-content .description {
        height: 105px;
        color: black;
        font-size: 15px;
        line-height: 1.4em;
        padding-bottom: 0px !important;
        transition: all 0.3s linear;
    }

    #dynamic-cards .card-box .card-box-content .card-box-footer {
        font-size: 14px;
        height: 20%;
        position: relative;
        background-color: #EFEFEF;
        padding-bottom: 27px;
        margin: 0px;
    }

    #dynamic-cards .card-box .card-box-content .card-box-footer a {
        color: white;
        background-color: #002776;
        padding: 10px;
        font-weight: bold;
    }

    #dynamic-cards .card-box .card-box-content .card-box-footer a:hover {
        background-color: #009fda;
    }

    #dynamic-cards .hover .card-box-content .description {
        display: block !important;
        height: auto !important;
        opacity: 1 !important;
        transition: all 0.5s linear;
        height: 110px;
    }
    
    #dynamic-cards .card-box:hover .card-box-content .description {
        height: 160px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  id="dynamic-cards">
  <!-- Card-->
  <div class="card-box mb-3">
    <!-- Bild-->
    <div class="card-pic">
         <img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Grey_squirrel_400px.jpg">
    </div>
    <!--  Content-->
    <div class="card-box-content">

      <h2 class="title">Headline</h2>

      <p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>

       <div class="card-box-footer">
            <br>
            <a href="htttps://www.hays.de" target="_blank">Button</a></div>
       </div>

     </div>

</div>

Answer 2

您可以在不使用 JavaScript 的情况下通过添加以下样式来创建此动画

.card-box:hover .card-box-content{
  transform: translateY(-80px);
}

请记住，为文本插入静态高度并不是一项有趣的工作。 我建议不要考虑高度，如果必须考虑，请考虑overfolow-y:scroll。