Блог

Главная - Вопросы по программированию - Добавить translate3d для каждого элемента в меню с задержкой

Добавить translate3d для каждого элемента в меню с задержкой

#javascript #jquery #css #jquery-animate #translate3d

#javascript #jquery #css #jquery-анимировать #translate3d

Вопрос:

Мне нужно сделать translate3d для моего меню,

Мне нужно создать анимацию, подобную этому меню на этом сайте в мобильном ( https://www.micai.aristidebenoist.com / ).

Вы можете увидеть translate3d , как это может работать, его отображение в виде медленной анимации

я пробую больше кода, но мне это не нравится

Мой код :

 $('.menu-trigger').on('click', function() {
  $('#menu-slide-menu li').each(function() {
    $('#menu-slide-menu li').css('transform', 'translate3d(0%, 0px, 0px)');
  });
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-trigger">Menu</div>
<ul id="menu-slide-menu">
  <li class="element">bla bla</li>
  <li class="element">bla bla</li>
  <li class="element">bla bla</li>
  <li class="element">bla bla</li>
</ul>

Как это можно сделать!

Комментарии:

1. Какого эффекта вы пытаетесь достичь с li помощью?

2. это меню в css имеет непрозрачность = 0, при нажатии на панель навигации мне нужно показать это меню, как на сайте, на котором я его разместил

3. проблема hidden в том, что при нажатии на div menu-trigger мне нужно показать весь элемент меню, например меню здесь ( micai.aristidebenoist.com ) в мобильном

4. @Eddie ты меня понимаешь?