为菜单创建 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，然后使用不同的转换延迟重新转换它以在悬停时显示它菜单的不同元素以获得 "flip-down" 效果。您的代码和示例之间的唯一区别是，因为您没有为每个人 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/

为菜单创建 CSS3 向下翻动动画

Create a CSS3 flip-down animation for menus

css

transform