與jQuery附加元素並與CSS轉換延遲同步
[英]Append element with jQuery in sync with CSS transition delay
問題描述
我需要能夠將菜單中相對定位的元素附加到絕對定位的下拉菜單中。 使用jQuery可以很好地完成-但是，下拉菜單上存在CSS轉換延遲，而且我很難確定一種干凈的方式來處理附加操作，以使其與下拉菜單處於活動狀態同步。
在下拉菜單變為活動狀態之前，頂層菜單具有500ms的轉換延遲。 我需要確保“ 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 個解決方案
解決方案1
0 已采納 2017-05-25 01:26:42
我不確定為什么要從.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>
解決方案2
0 2017-05-25 01:38:39
如何像這樣使用'transitionend'或'animationend'事件：obj.addEventListener（'transitionend'，doSomething）; obj.addEventListener（'animationend'，doSomething）; 您也可以在Chrome，Safari和Opera中使用“ webkitTransitionEnd”和“ webkitAnimationEnd”。
jQuery addClass打破延遲，或者jQuery延遲打破CSS過渡，或者兩者都發生
[英]Either jQuery addClass breaks delay, or jQuery delay breaks CSS transition, or both
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.