使用jQuery追加元素与CSS转换延迟同步

时间：2017-05-25 00:47:00

标签： javascript jquery css css3

我需要能够将菜单中相对定位的元素附加到绝对定位的下拉菜单中。这与jQuery很好 - 但是，下拉菜单上有一个CSS转换延迟，我很难找到一个干净的方法来处理追加，以便它与下拉菜单同步变为活动状态。

在下拉菜单变为活动状态之前，顶级菜单的转换延迟为500毫秒。我需要确保“block”元素的jQuery追加与此同步。有没有人有任何指导方法来处理这个问题？我没有灵活性来重做标记。

jQuery(document).ready(function($) {

  $('.main-menu > li').on({
    mouseenter: function() {
      $(this).addClass('active');

      $('.block').appendTo($(this).find('.dropdown'));

    },
    mouseleave: function() {
      $(this).removeClass('active');

      $('.block').appendTo('.header');
    }
  })

});
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  min-height: 100%;
}

body {
  position: relative;
  overflow: hidden;
  margin: 0;
}

.main-menu {
  display: flex;
  justify-content: space-around;
  background: yellow;
}

.dropdown {
  opacity: 0;
  transition: all 200ms ease-in-out 200ms;
  visibility: hidden;
  position: absolute;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  overflow: hidden;
  background: red;
}

li.active .dropdown {
  transition: all 0s linear 500ms;
  opacity: 1;
  visibility: visible;
}

.block {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<body>

  <header class="header">
    <ul class="main-menu">
      <li>
        <a href="/test">Test</a>
        <div class="dropdown">
          <div class="wrapper">
            <div class="menu-subcategory">
              <h4><a href="/sub">Sub Cat</a></h4>
              <ul>
                <li>
                  <a href="/test">Test</a>
                </li>
                <li>
                  <a href="/test">Test 2</a>
                </li>
                <li>
                  <a href="/test">Test 3</a>
                </li>
                <li>
                  <a href="/test">Test 4</a>
                </li>
                <li>
                  <a href="/test">Test 5</a>
                </li>
                <li>
                  <a href="/test">Test 6</a>
                </li>
                <li>
                  <a href="/test">Test 7</a>
                </li>
                <li>
                  <a href="/test">Test 8</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>
      <li>
        <a href="/test">Test 2</a>
        <div class="dropdown">
          <div class="wrapper">
            <div class="menu-subcategory">
              <h4><a href="/sub">Sub Cat</a></h4>
              <ul>
                <li>
                  <a href="/test">Test</a>
                </li>
                <li>
                  <a href="/test">Test 2</a>
                </li>
                <li>
                  <a href="/test">Test 3</a>
                </li>
                <li>
                  <a href="/test">Test 4</a>
                </li>
                <li>
                  <a href="/test">Test 5</a>
                </li>
                <li>
                  <a href="/test">Test 6</a>
                </li>
                <li>
                  <a href="/test">Test 7</a>
                </li>
                <li>
                  <a href="/test">Test 8</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>
      <li>
        <a href="/test">Test 3</a>
        <div class="dropdown">
          <div class="wrapper">
            <div class="menu-subcategory">
              <h4><a href="/sub">Sub Cat</a></h4>
              <ul>
                <li>
                  <a href="/test">Test</a>
                </li>
                <li>
                  <a href="/test">Test 2</a>
                </li>
                <li>
                  <a href="/test">Test 3</a>
                </li>
                <li>
                  <a href="/test">Test 4</a>
                </li>
                <li>
                  <a href="/test">Test 5</a>
                </li>
                <li>
                  <a href="/test">Test 6</a>
                </li>
                <li>
                  <a href="/test">Test 7</a>
                </li>
                <li>
                  <a href="/test">Test 8</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>
      <li>
        <a href="/test">Test 4</a>
      </li>
      <li>
        <a href="/test">Test 5</a>
      </li>
      <li>
        <a href="/test">Test 6</a>
      </li>
      <li>
        <a href="/test">Test 7</a>
      </li>
      <li>
        <a href="/test">Test 8</a>
      </li>
    </ul>
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
        dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas
        at lorem non hendrerit.</p>
    </div>
  </header>

  <div class="container">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
      dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at
      lorem non hendrerit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
      dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at
      lorem non hendrerit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
      dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at
      lorem non hendrerit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
      dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at
      lorem non hendrerit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
      dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at
      lorem non hendrerit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
      dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at
      lorem non hendrerit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
      dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at
      lorem non hendrerit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
      dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at
      lorem non hendrerit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
      dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at
      lorem non hendrerit.</p>
  </div>

</body>

2 个答案:

答案 0 :(得分：0)

我不确定您为什么要从.header中删除.block并将其添加到li并再次将其删除。如果它需要始终存在。我的猜测是你正在寻找克隆。

查看以下代码段是否解决了您的目的

 jQuery(document).ready(function($) {

 $('.block').clone().appendTo($('li').find('.dropdown'));
 $('.main-menu > li').on({
    mouseenter: function() {
      $(this).addClass('active');
    },
    mouseleave: function() {
      $(this).removeClass('active');
    }
  })
 

});
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  min-height: 100%;
}

body {
  position: relative;
  overflow: hidden;
  margin: 0;
}

.main-menu {
  display: flex;
  justify-content: space-around;
  background: yellow;
}

.dropdown {
  opacity: 0;
  transition: all 200ms ease-in-out 200ms;
  visibility: hidden;
  position: absolute;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  overflow: hidden;
  background: red;
}

li.active .dropdown {
  transition: all 0s linear 500ms;
  opacity: 1;
  visibility: visible;
}

.block {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<body>

  <header class="header">
    <ul class="main-menu">
      <li>
        <a href="/test">Test</a>
        <div class="dropdown">
          <div class="wrapper">
            <div class="menu-subcategory">
              <h4><a href="/sub">Sub Cat</a></h4>
              <ul>
                <li>
                  <a href="/test">Test</a>
                </li>
                <li>
                  <a href="/test">Test 2</a>
                </li>
                <li>
                  <a href="/test">Test 3</a>
                </li>
                <li>
                  <a href="/test">Test 4</a>
                </li>
                <li>
                  <a href="/test">Test 5</a>
                </li>
                <li>
                  <a href="/test">Test 6</a>
                </li>
                <li>
                  <a href="/test">Test 7</a>
                </li>
                <li>
                  <a href="/test">Test 8</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>
      <li>
        <a href="/test">Test 2</a>
        <div class="dropdown">
          <div class="wrapper">
            <div class="menu-subcategory">
              <h4><a href="/sub">Sub Cat</a></h4>
              <ul>
                <li>
                  <a href="/test">Test</a>
                </li>
                <li>
                  <a href="/test">Test 2</a>
                </li>
                <li>
                  <a href="/test">Test 3</a>
                </li>
                <li>
                  <a href="/test">Test 4</a>
                </li>
                <li>
                  <a href="/test">Test 5</a>
                </li>
                <li>
                  <a href="/test">Test 6</a>
                </li>
                <li>
                  <a href="/test">Test 7</a>
                </li>
                <li>
                  <a href="/test">Test 8</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>
      <li>
        <a href="/test">Test 3</a>
        <div class="dropdown">
          <div class="wrapper">
            <div class="menu-subcategory">
              <h4><a href="/sub">Sub Cat</a></h4>
              <ul>
                <li>
                  <a href="/test">Test</a>
                </li>
                <li>
                  <a href="/test">Test 2</a>
                </li>
                <li>
                  <a href="/test">Test 3</a>
                </li>
                <li>
                  <a href="/test">Test 4</a>
                </li>
                <li>
                  <a href="/test">Test 5</a>
                </li>
                <li>
                  <a href="/test">Test 6</a>
                </li>
                <li>
                  <a href="/test">Test 7</a>
                </li>
                <li>
                  <a href="/test">Test 8</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>
      <li>
        <a href="/test">Test 4</a>
      </li>
      <li>
        <a href="/test">Test 5</a>
      </li>
      <li>
        <a href="/test">Test 6</a>
      </li>
      <li>
        <a href="/test">Test 7</a>
      </li>
      <li>
        <a href="/test">Test 8</a>
      </li>
    </ul>
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
        dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas
        at lorem non hendrerit.</p>
    </div>
  </header>

  <div class="container">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
      dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at
      lorem non hendrerit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
      dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at
      lorem non hendrerit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
      dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at
      lorem non hendrerit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
      dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at
      lorem non hendrerit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
      dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at
      lorem non hendrerit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
      dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at
      lorem non hendrerit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
      dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at
      lorem non hendrerit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
      dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at
      lorem non hendrerit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec
      dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at
      lorem non hendrerit.</p>
  </div>

</body>

答案 1 :(得分：0)

如何使用'transitionend'或'animationend'事件，如下所示： obj.addEventListener（'transitionend'，doSomething）; obj.addEventListener（'animationend'，doSomething）; 你也可以在Chrome，Safari和Opera中使用'webkitTransitionEnd'和'webkitAnimationEnd'。

相关问题
最新问题