jquery - CSS3 过渡和转换元素的问题和代码检查异常

标签 jquery css

我正在尝试为菜单使用一些 CSS3 过渡/变换效果,但在调试时我注意到了一些奇怪的行为。

除了 CSS3 过渡和转换,我还使用一个简单的 jQuery 函数来捕获点击并添加过渡延迟。

<button class="menu">
      Show Navigation
    </button>
    <nav class="navigation">
      <div class="row">
        <div class="col">
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
          </ul>
        </div>
        <div class="col">
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
          </ul>
        </div>
        <div class="col">
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
          </ul>
        </div>
        <div class="col">
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
          </ul>
        </div>
      </div>
    </nav>
    $(document).ready(function() {


      $(".menu").click(function() {
        $("body").toggleClass("menu-active");
        $(".navigation li").each(function(index) {
          $(this).css({
            'transition-delay': (.25 * index) + 's'
          });
        });
      });

    });
    .navigation {
      display: none;
      margin: 100px 0 0 0;
    }

    .navigation li {
      margin: 0 0 20px 0;
      opacity: 0;
      transform: translate3d(7.5%, 0, 0);
    }

    .menu-active .navigation li {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: transform 0.3s ease 0.15s, opacity 0.3s ease 0.15s;
    }

    .navigation li a {
      font-size: 24px;
      line-height: 24px;
    }

    .menu-active .navigation {
      display: block;
    }

这是我的代码的 jsfiddle:

https://jsfiddle.net/zeropsi/8vprw45y/

现在,如您所见,单击按钮时不会出现过渡/变换效果,但是,如果您检查元素(我使用的是 Chrome)并单击列表元素,您可以看到过渡发生。

关于可能导致问题的原因有什么想法吗?

最佳答案

改变你的CSS。 display: none 禁用动画。

.navigation {
  opacity: 0;
  margin: 100px 0 0 0;
}
/* ... */
.menu-active .navigation {
  opacity: 1;
}

关于jquery - CSS3 过渡和转换元素的问题和代码检查异常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57170483/

相关文章:

javascript - JQTouch 无法播放链接的 mp3 文件

javascript - JQuery 表格排序器问题

javascript - Document.querySelector() 不适用于 bootstrap css

PHP header 包含文件在一个文件中有效,在其他文件中无效

html - 重叠行和部分 html css bootstrap

php - 如何隐藏 div 内容并仅在单击按钮时显示?

javascript - JQuery Show 不适用于某些元素

javascript - 为什么 IE 不能在返回导航上重新构建动态修改的选择框?

javascript - Fullcalendar AJAX 调用多次触发,无需重新加载页面

javascript - 菜单仅在一页上