css - 为菜单创建 CSS3 向下翻转动画

Question

我知道那里有很多示例，但我在使用我的特定 HTML 时遇到了问题。

HTML 无法更改，它是 Wordpress 生成的。

我有一个包含两个元素的子菜单的菜单。

我想创建一个 CSS3 动画，它连续向下翻转子项，如本例所示:http://cssdeck.com/labs/navigation-dropdown-with-flip-effect

我一直在研究这支笔中的代码 http://codepen.io/ganesh_r/pen/tmHsj但我没有看到任何与我尝试做的类似的事情。

我的代码非常简单:

.sub-menu{-webkit-transform-style: preserve-3d;}
.has-children:hover .sub-menu li{transition: 0.5s;transform-origin: 0px 0px;transform: rotateX(-90deg);}

我认为这与我所追求的很接近，但实际上我什么也没看到。而且我遇到了一些障碍，因为我无法弄清楚为什么我现在在使用这段代码时看不到任何东西。

关于如何实现连续下拉的任何想法？我的 HTML 示例:

<li class="has-children main-link"><a>Top Level menu item</a>
    <ul class="sub-menu">
        <li><a>Item one</a></li>
        <li><a>Item two</a></li>
    </ul>
</li>

这是我的 JS Fiddle https://jsfiddle.net/656mxu6w/

Answer 1

查看更新后的 JS Fiddle:https://jsfiddle.net/j5su2upp/1/

简而言之，根据您已经提供的示例，您需要做的是使用转换隐藏下拉菜单，而不仅仅是 display:none 然后使用不同的方法重新转换它以在悬停时显示它菜单不同元素的过渡延迟以获得“向下翻转”效果。您的代码和示例之间的唯一区别是，由于您没有为每个 li 单独的类(并且由于无法更新标记而无法真正添加它们)，因此您需要使用CSS 中的 nth-child 选择器将不同的样式应用于不同的 li 元素。

因此，特定于动画的样式最终如下所示:

.sub-menu li {
  -webkit-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: perspective(350px) rotateX(-90deg);
  -o-transform: perspective(350px) rotateX(-90deg);
  transform: perspective(350px) rotateX(-90deg);
  position: absolute;
 }

.sub-menu li:nth-child(1) { 
  -webkit-transition:0.2s linear 0.2s;
  -o-transition:0.2s linear 0.2s;
  transition:0.2s linear 0.2s;
}
.sub-menu li:nth-child(2) {
  -webkit-transition: 0.2s linear 0s;
  -o-transition: 0.2s linear 0s;
  transition: 0.2s linear 0s;
  top: 94px;
}

.has-children:hover .sub-menu li {
  -webkit-transform: perspective(350px) rotateX(0deg);
  -o-transform: perspective(350px) rotateX(0deg);
  transform: perspective(350px) rotateX(0deg);
  -webkit-transition:0.2s linear 0s;
  -o-transition:0.2s linear 0s;
  transition:0.2s linear 0s;
}

.has-children:hover li:nth-child(2) {
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

编辑:绝对定位已用于重叠菜单后面的内容，而不是将其向下推。更新后的 JS Fiddle 是 https://jsfiddle.net/j5su2upp/2/