CSS 中的顶部与底部的过渡效果不起作用答案

【问题标题】：Transition effects Top vs. Bottom in CSS is not workingCSS 中的顶部与底部的过渡效果不起作用
【发布时间】：2014-03-11 00:49:09
【问题描述】：

嗯，这是我在这里的第一个主题，所以就在这里！

我刚刚完成了一个非常简单的 :hover 代码，您可以在其中将鼠标悬停在图像上，并在其下方显示完整的标题。更具体地说，在这段代码中，我有两种类型的标题，一种在图像上方，一种在图像正下方，当您将鼠标悬停时可以找到。

:hover 效果很好，但是我需要添加一个简单的效果，只是一点线性过渡。所以我在“a”标签中添加了最基本的过渡，但它根本不起作用！我猜代码无法识别 .featured-banner a 类中的 top:0px 和 中的 bottom:0px .featured-banner a:hover.

有人有解决办法吗？感谢你们帮助我！

哦，以防万一，字幕类中的文字是用葡萄牙语写的，但不是很有趣，只是坎昆的广告！ =P

这是我正在使用的 HTML：

<div class="featured-banner">
<a href="#">
    <div class="caption">
        <p>Mega Oferta • Cancún • Carnaval 2014</p>
    </div>
    <img src="http://www.advtour.com.br/sample-cancun.jpg" />
    <div class="under-caption">A partir de US$ 2.148 Ou entrada + 11x de R$ 358</div>
</a>

这里是 CSS：

.featured-banner {
    width:930px;
    height:350px;
    background:#000;
    font-family:sans-serif;
    font-size:23px;
    margin:14px 0px;
    overflow:hidden;
    position:relative;
}
.featured-banner a {
    text-decoration:none;
    position:absolute;
    top:0;
    -webkit-transition:all 1s ease;
       -moz-transition:all 1s ease;
        -ms-transition:all 1s ease;
         -o-transition:all 1s ease;
            transition:all 1s ease;
}
.featured-banner a:hover {
    top:inherit;
    bottom:0;
}

.caption {
    width:100%;
    height:350px;
    color:#FFF;
    text-transform:uppercase;
    position:absolute;
    top:0px;
    z-index:98;
}

.caption p {
    width:97%;
    background:rgba(0,0,0, .4);
    color:#FFF;
    text-align:justify;
    text-transform:uppercase;
    background:rgba(0,0,0, .4);
    padding:11px 14px;
    position:absolute;
    bottom:0px;
    z-index:98;
}

.under-caption {
    width:97%;
    background:rgba(0,0,0, .4);
    color:#FFF;
    font-size:20px;
    text-align:justify;
    background:rgba(0,0,0, .4);
    padding:11px 14px;
    z-index:98;
}

Here is a demo

【问题讨论】：

标签： css transition effect

【解决方案1】：

您只能转换相同的属性。顶部和底部不一样。我设计了一个小提琴，它展示了它是如何工作的。

.under-caption {
    position: absolute;
    width:97%;
    background:rgba(0,0,0, .4);
    color:#FFF;
    font-size:20px;
    text-align:justify;
    background:rgba(0,0,0, .4);
    padding:11px 14px;
    z-index:98;
    bottom: -3em;
    -webkit-transition:bottom 1s ease;
       -moz-transition:bottom 1s ease;
        -ms-transition:bottom 1s ease;
         -o-transition:bottom 1s ease;
            transition:bottom 1s ease;
}

.featured-banner:hover .under-caption{
    bottom: 1em;
}

http://jsfiddle.net/u3E5P/1/

【讨论】：

【解决方案2】：

如果要过渡效果，则需要过渡相同的样式。从上到下不会导致转换，因为它正在改变样式。如果您将top: 0; 转换为top: 100%;，那么您将看到一个转换。

这是我更改的 css：

.featured-banner a {
    text-decoration:none;
    position:absolute;
    top:0;
    -webkit-transition:all 1s ease;
       -moz-transition:all 1s ease;
        -ms-transition:all 1s ease;
         -o-transition:all 1s ease;
            transition:all 1s ease;
}

.featured-banner a:hover {
    top:inherit;
    top: -55px;
}

最后，提琴：Demo

【讨论】：