我正在尝试修改我在网上找到的一个教程,它"几乎"做了我需要的,但是当它涉及到CSS的"过渡"效果时就卡住了。
本质上,我需要文本与顶部保持一定的距离,因为标题总是相同的高度(因此只有标题显示)。在悬停时,我需要文本块粘在底部边缘因为悬停文本可以长也可以短。
我让它按照我想要的方式工作,但是当我使用top: auto时,过渡效果不再起作用。如果我给top赋值为0,那么文本就会像我想的那样粘在顶部而不是底部。
https://jsfiddle.net/bsummers/sxh0n7d1/将过渡只是不工作与'auto'?
body{
font-family: arial;
}
}.showcase {
list-style: none;
}
.showcase li {
background: red none repeat scroll 0 0;
display: inline-block;
margin: 0;
max-height: 200px;
overflow: hidden;
width: 300px;
}
.showcase li:last-child{
margin: 0;
}
.showcase a {
display: block;
min-height: 200px;
overflow: hidden;
position: relative;
text-decoration: none;
width: 100%;
}
.showcase a img {
height: auto;
margin: 0 auto;
max-width: 100%;
position: absolute;
top: 0;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.showcase a:hover img {
top: -20px;
}
.showcase .text-holder {
top: 156px;
bottom: 0;
position: absolute;
z-index: 99;
width: 100%;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.showcase a:hover .text-holder {
bottom: 0;
top: auto; //changing this to 0 doesn't stick the text to the bottom, but transition works.
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.showcase a span {
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: block;
font-size: 11px;
line-height: 20px;
margin-top: 15px;
width: 100%;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.showcase a h3 {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
box-sizing: border-box;
color: #fff !important;
cursor: pointer;
font-size: 13px;
padding: 10px;
text-align: center;
text-transform: uppercase;
width: 100%;
margin-bottom: 0 !important;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
<ul class="showcase">
<li class="thumb1">
<a href="http://blog.web3canvas.com/">
<img src="http://demo.web3canvas.com/html5-css3/image-gallery-showcase-pure-css3/images/thumb1.jpg" width="500" height="374" alt="web3canvas">
<div class="text-holder">
<h3>My Profile<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem leo. Pellentesque et libero id lectus pretium lacinia...</span></h3>
</div>
</a>
</li>
<li class="thumb2">
<a href="http://blog.web3canvas.com/">
<img src="http://demo.web3canvas.com/html5-css3/image-gallery-showcase-pure-css3/images/thumb2.jpg" width="500" height="374" alt="web3canvas">
<div class="text-holder">
<h3>My Profile<span>Different length of text...</span></h3>
</div>
</a>
</li>
</ul>
这就是副本的相关性
请看下面的代码片段。这是与重复链接中提供的相同的解决方案。使用transform: translateY();
来移动叠加,而不是试图计算不断变化的高度。
body{
font-family: arial;
}
}.showcase {
list-style: none;
}
.showcase li {
background: red none repeat scroll 0 0;
display: inline-block;
margin: 0;
max-height: 200px;
overflow: hidden;
width: 300px;
}
.showcase li:last-child{
margin: 0;
}
.showcase a {
display: block;
min-height: 200px;
overflow: hidden;
position: relative;
text-decoration: none;
width: 100%;
}
.showcase a img {
height: auto;
margin: 0 auto;
max-width: 100%;
position: absolute;
top: 0;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.showcase a:hover img {
top: -20px;
}
.showcase .text-holder {
top: 100%;
position: absolute;
z-index: 99;
width: 100%;
transform: translateY(-50px); /* Height you want shown at load */
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.showcase a:hover .text-holder {
top: 100%;
transform: translateY(-100%); /* moves 100% of the overlay into view. */
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.showcase a span {
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: block;
font-size: 11px;
line-height: 20px;
margin-top: 15px;
width: 100%;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.showcase a h3 {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
box-sizing: border-box;
color: #fff !important;
cursor: pointer;
font-size: 13px;
padding: 10px;
text-align: center;
text-transform: uppercase;
width: 100%;
margin-bottom: 0 !important;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
<ul class="showcase">
<li class="thumb1">
<a href="http://blog.web3canvas.com/">
<img src="http://demo.web3canvas.com/html5-css3/image-gallery-showcase-pure-css3/images/thumb1.jpg" width="500" height="374" alt="web3canvas">
<div class="text-holder">
<h3>My Profile<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem leo. Pellentesque et libero id lectus pretium lacinia...</span></h3>
</div>
</a>
</li>
<li class="thumb2">
<a href="http://blog.web3canvas.com/">
<img src="http://demo.web3canvas.com/html5-css3/image-gallery-showcase-pure-css3/images/thumb2.jpg" width="500" height="374" alt="web3canvas">
<div class="text-holder">
<h3>My Profile<span>Different length of text...</span></h3>
</div>
</a>
</li>
</ul>
"auto"在转场中经常失败,因为"auto"是而不是值。不能从值转换到不明确的设置。
不是每个CSS属性都可以过渡,基本规则是只能通过绝对值进行过渡。例如,你不能在高度为0px到auto之间转换。浏览器无法计算中间转换值,因此属性更改是即时的。
摘自:https://blog.alexmaccaw.com/css-transitions