Question

我正在尝试创建一个子菜单动画，让它从它的父菜单后面插入，就像它在铰链上一样。我希望它稍稍超过最后的静止位置，然后再回来。根据我对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;
}

Live Demo

因此，基于来自this MDN article的信息，cubic-bezier() 可以在Y轴上具有大于1的值，从而允许跳出效果。理论上，这意味着我使用的cubic-bezier()应该使子菜单从-90deg下降到约15deg，然后再回到0deg。

不幸的是，我没有看到这种行为。我确实看到cubic-bezier()会影响动画的时间，而不会影响任何计时功能，但它不会提供我期望的弹跳效果。

我认为这与从-90deg到0deg和过去有关，但此时我已经超级迷失了。到目前为止，我无法找到有关使用cubic-bezier()曲线和rotateX()函数来生成此类效果的文档，甚至还有文档说明rotateX()是否支持这种旋转或者世界上正在发生什么......帮助？

Answer 1

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

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

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

<强> CORRECTION

我错了。

是的，可以使用立方贝塞尔（bezier）进行弹跳效果。

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

easing transitions demo

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

抱歉！

我可以使用cubic-bezier（）时序进行3D变换反弹

HTML

CSS

1 个答案: