2

我正在尝试创建一个子菜单动画，让它从它的父菜单后面放入，就像它在铰链上一样。我希望它稍微超过它的最终静止位置，然后再回来。根据我对cubic-bezier()功能符号的理解，这应该是可能的。我不确定这是一个错误还是只是我的误解，但我似乎无法让它工作。我删除了所有供应商前缀（它们在演示中），但这是我正在使用的代码：

HTML

<ul class="nav">
    <li>
        <a href="index.html">Home</a>
    </li>
    <li>
        <a href="about.html">About</a>
        <ul>
            <li>
                <a href="about.html#company">Company</a>
            </li>
            <li>
                <a href="about.html#team">Team</a>
            </li>
        </ul>
    </li>
    <li>
     <a href="contact.html">Contact</a>
    </li>
</ul>

CSS

ul {
    background-color:#99f;
    border-radius:10px;
    list-style:none;
    margin:0;
    padding:0;
}

ul:after {
    clear:both;
    content:'';
    display:block;
    height:0;
    margin:0;
    padding:0;
    width:100%;
}

.nav > li {
    display:block;
    float:left;
    perspective:600px;
    perspective-origin:100% 100%;
    transition:background-color .2s .4s;
}

.nav li a {
    color:#fff;
    display:block;
    padding:20px;
    text-decoration:none;
}

.nav li ul {
    background-color:#bbf;
    border-radius:0 0 10px 10px;
    position:absolute;
    transform:rotateX(-90deg);
    transform-origin:0 0 0;
    transition:transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav li:hover {
    background-color:#bbf;
    -webkit-transition-delay:0;
}

.nav li:hover ul {
    transform:rotateX(0);
    transition-delay:.2s;
}

.nav li li {
    white-space:nowrap;
}

现场演示

因此，根据这篇 MDN 文章中的信息，Y 轴上的值cubic-bezier() 可以大于 1，从而产生反弹效果。从理论上讲，这意味着cubic-bezier()我正在使用的子菜单应该从 -90 度摆动到大约 15 度，然后回到 0 度。

不幸的是，我没有看到这种行为。我确实看到cubic-bezier()影响动画的时间与根本不使用时间功能，但它没有提供我期望的反弹效果。

我打赌这与从 -90 度到 0 度及过去有关，但在这一点上我非常迷茫。到目前为止，我一直无法找到任何关于使用cubic-bezier()带有函数的曲线rotateX()来产生这种效果的文档，甚至找不到说明是否rotateX()支持这种旋转或世界上正在发生什么的文档......帮助？

4

1 回答 1

3

转换属性中的第三个数据是一个计时函数（正如您已经说过的）。以任何方式都可以改变过渡中发生的事情（例如，转到另一个坐标）

我猜你唯一的选择是使用关键帧。（毕竟没那么糟糕）

当然你不会得到贝塞尔插值，但我认为指定 3 或 4 个关键帧会使其足够好

更正

我错了。

是的，弹跳效果可以用三次贝塞尔曲线来完成。

你可以在这里得到一个很酷的页面

缓动过渡演示

我想您的问题是并非所有属性都可以“反弹”，或者更准确地说，并非所有属性都可以扩展到过渡的 100% 限制之外。

对不起 ！

于 2013-03-01T08:35:19.990 回答