Svelte 童車翻轉 animation
[英]Buggy flip animation in Svelte
問題描述
我有一個帶有列表的Svelte應用程序，其項目在移動后具有內置翻轉animation。 這些項目有一個絕對位於其中的菜單，並且 z-index 為 10。問題是：一旦翻轉 animation 運行，菜單就會落后於其他項目。 我在以下 REPL 中重新創建了它：
https://svelte.dev/repl/9d2f70193508421db3619a6d14bd3495?version=3.49.0
問題。
- 為什么會出現這個錯誤？
- 如何解決這個問題？
- 是否有解決方法？
我已經玩過isolation: isolate ，其他 z-index 值，select 當前正在移動的任務，但似乎沒有任何工作。
1 個解決方案
解決方案1
1 2022-08-30 11:21:05
為什么？
因為transform所需的轉換引入了新的堆疊上下文，並且由於層次結構，菜單是其中的一部分。 z-index 將與僅包含該項目的新堆疊上下文相關，因此菜單永遠不會位於其他任何內容之上。
使固定？
不要將菜單添加到項目中。 將其在層次結構中向上移動，例如直接移動到<body>中。 您可以重新父元素，例如使用操作（請參閱本期關於<body>注入的建議）。
定位將需要更多的努力。 您可以使用getBoundingClientRect來獲取目標元素的相關信息。
解決方法？
也許關閉 animation 上的所有菜單？ （並提高他們的速度。）
修復Buggy JQuery動畫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.