小贝子编程

使用CSS而不是Javascript进行高度转换



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

您可以通过向.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>

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

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

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

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium