1

我正在尝试仅使用 CSS 动画创建“窥视”效果。

我的意思是在一个正方形中会有一些内容简介，下面有更详细的描述。当用户将鼠标悬停在正方形上时，新内容会从底部向上滑动并填充它所包含的空间。

我有一个 JavaScript 解决方案，它使用 mouseenter 和 mouseleave 根据该区域已经可见的事物的高度来计算顶部的正确位置，并在其上有一个 css 动画，但我试图找出一种方法来做到这一点仅使用 CSS。

到目前为止我的尝试是这样的：http: //jsfiddle.net/7yrWL/1/

这使用了这样的技术：

.peek { max-height: 0; transition: max-height 1s; }
.main:hover .peek { max-height: 300px; } /* I'd prefer if this were auto or 100% */

当您将鼠标悬停在 main 上时，最大高度会发生变化，并将 peek 内容推送到视图中。

但是，我的问题是，由于我必须对 max-height 使用静态 px 值才能使 css 过渡正常工作，因此动画看起来需要不同的时间才能完成，具体取决于 peek 文本的大小。当您将鼠标悬停在它上面时，它也会有明显的延迟，因为最大高度过渡“赶上”到实际高度。

任何人都知道任何替代方法（不使用 JavaScript）？

4

1 回答 1

2

好吧，这真的很棘手，关键是使用翻译并注意标题高度：

http://jsfiddle.net/coma/vzvXf/17/

HTML

<ul class="peeks">
    <li>
        <div>
            <div>
                <div class="title">
                    <h3>Title</h3>
                    <h4>Subtitle</h4>
                </div>
                <div class="peek">
                    <p>Test peek test peek<br/>Test peek</p>
                </div>
            </div>
        </div>
    </li>
    <li>
        <div>
            <div>
                <div class="title">
                    <h3>Title</h3>
                    <h4>Subtitle</h4>
                </div>
                <div class="peek">
                    <p>Test peek test peek<br/>Test peek</p>
                    <p>Test peek test peek<br/>Test peek</p>
                    <p>Test peek test peek<br/>Test peek</p>
                    <p>Test peek test peek<br/>Test peek</p>
                    <p>Test peek test peek<br/>Test peek</p>
                    <p>Test peek test peek<br/>Test peek</p>
                    <p>Test peek test peek<br/>Test peek</p>
                    <p>Test peek test peek<br/>Test peek</p>
                </div>
            </div>
        </div>
    </li>
</ul>

CSS

ul.peeks {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.peeks:after {
    content: "";
    clear: both;
}

ul.peeks > li {
    width: 300px;
    border: 10px solid orange;
    margin: 0 5px 5px 0;
    float: left;
    background-color: orange;
    color: #fff;
    overflow: hidden;
}

ul.peeks > li.large {
    width: 600px;
}

ul.peeks > li > div {
    padding: 75px 10px 10px 10px;
    background-color: red;
    position: relative;
}

ul.peeks > li > div:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10px;
    background-color: red;
}

ul.peeks > li > div > div {
    -moz-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
    -moz-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s
}

ul.peeks > li:hover > div > div {
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

ul.peeks div.title {
    height: 0;
    position: relative;
    top: -65px;
}

ul.peeks h3 {
    font-size: 30px;
    line-height: 1em;
    margin: 0;
}

ul.peeks h4 {
    font-size: 20px;
    line-height: 1em;
    margin: 5px 0 10px 0;
}

ul.peeks div.peek {
    padding: 10px;
    background-color: green;
}
于 2013-05-20T15:42:48.043 回答