与jQuery附加元素并与CSS转换延迟同步

Question

I need to be able to append a relatively positioned element in my menu to the absolutely positioned dropdown menu. 我需要能够将菜单中相对定位的元素附加到绝对定位的下拉菜单中。 This is fine to do with jQuery - however, there's a CSS transition delay on the dropdown menu, and I'm having difficulty working out a clean way to handle the append so that it's in sync with the dropdown menu becoming active. 使用jQuery可以很好地完成-但是，下拉菜单上存在CSS转换延迟，而且我很难确定一种干净的方式来处理附加操作，以使其与下拉菜单处于活动状态同步。

The top level menu has a 500ms transition delay before the dropdown will become active. 在下拉菜单变为活动状态之前，顶层菜单具有500ms的转换延迟。 I need to make sure the jQuery append of the "block" element works in sync with this. 我需要确保“ block”元素的jQuery追加与此同步。 Does anyone have any guidance for a good way to handle this? 有没有人提供指导以解决此问题的好方法？ I don't have flexibility to rework the markup. 我没有灵活性来修改标记。

 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>

Answer 1

I am not sure why you want to remove the .block from .header and add it to li and remove it again. 我不确定为什么要从.header中删除.block并将其添加到li中，然后再次将其删除。 If it needs to be always present. 如果需要始终存在。 My guess is you are looking for clone. 我的猜测是您正在寻找克隆。

See if the below snippet solve your purpose 查看下面的代码段是否满足您的目的

  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>

Answer 2

How about use the 'transitionend' or 'animationend' event like this: obj.addEventListener('transitionend', doSomething ); 如何像这样使用'transitionend'或'animationend'事件：obj.addEventListener（'transitionend'，doSomething）; obj.addEventListener('animationend', doSomething ); obj.addEventListener（'animationend'，doSomething）; also you can use 'webkitTransitionEnd' and 'webkitAnimationEnd' in Chrome, Safari and Opera. 您也可以在Chrome，Safari和Opera中使用“ webkitTransitionEnd”和“ webkitAnimationEnd”。

与jQuery附加元素并与CSS转换延迟同步

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-05-25 01:26:42

解决方案2
0 2017-05-25 01:38:39

与jQuery附加元素并与CSS转换延迟同步

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-05-25 01:26:42

解决方案2 0 2017-05-25 01:38:39

解决方案1
0 已采纳 2017-05-25 01:26:42

解决方案2
0 2017-05-25 01:38:39