Question

我正在尝试使用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% */

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

然而，我的问题是，由于我必须使用静态px值作为最大高度才能使css转换工作，动画看起来需要花费不同的时间来完成，具体取决于窥视的大小文字是。当你将鼠标悬停在最大高度过渡“赶上”到真实高度时，它也会有明显的延迟。

任何人都知道有任何其他方法（不使用JavaScript）吗？

Answer 1

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

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;
}

仅使用CSS制作“窥视”效果

1 个答案: