CSS 过渡不适用于顶部:自动



我正在尝试修改我在网上找到的一个教程,它"几乎"做了我需要的,但是当它涉及到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

相关内容

  • 没有找到相关文章

最新更新