Создайте флип-вниз анимацию 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 скрипку: https://jsfiddle.net/j5su2upp/1/

Короче, что вам нужно сделать в соответствии с образцом вы уже обеспечивают это скрыть выпадающий с помощью преобразований вместо display:none, а затем повторно преобразуйте его, чтобы показать его при наведении с использованием различных задержек перехода для разных элементов меню, чтобы получить эффект «откидной». Единственное различие между вашим кодом и образцом заключается в том, что, поскольку у вас нет отдельных классов для каждого отдельного пользователя li (и их невозможно добавить, поскольку вы не можете обновить разметку), вам нужно использовать селекторы nth-child в вашем CSS для применения различные стили к различным 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; 
} 

Edit: Абсолютное позиционирование используется, чтобы перекрывать содержимое следующее меню вместо того, толкая его вниз. Обновленный JS Fiddle: https://jsfiddle.net/j5su2upp/2/