我的僞元素動畫不起作用

**你好，我的菜單anomation不起作用，不知道爲什麼。它應該像這樣工作：當你點擊菜單圖標時，圖標從漢堡變成了十字。我的僞元素動畫不起作用

我的HTML是這樣的： **

<body> 
    <div class="menu"> 
     <div class="line"></div> 
    </div> 
    <script>$('.menu').click(function(){ 
     $this = $(this); 
     if ($this.hasClass('active')) { 
     $this.removeClass('active'); 
     } 
     else { 
     $this.addClass('active');  
     } 

    });</script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
</body>

我的CSS是這樣的：

.menu { 
    position: absolute; 
    height: 40px; 
    width: 40px; 
    cursor: pointer; 
    top: 3%; 
    left: 95%; 
    z-index: 999; 
} 
.line { 
    height: 5px; 
    width: 40px; 
    background: red; 
    position: absolute; 
    top: 50%; 
    transition: all 250ms linear; 

} 
.line:after, .line:before { 
    content: ' '; 
    height: 5px; 
    width: 40px; 
    background: red; 
    position: absolute; 
    transition: all 250ms linear; 
} 
.line:before { 
    top: -10px; 
} 
.line:after { 
    bottom: -10px; 
} 
.menu.active .line { 
    background: transparent; 
} 
.menu.active .line:before { 
    background: red; 
    transform: rotate(-405deg); 
    top: 0px; 
} 
.menu.active .line:after { 
    background: red; 
    transform: rotate(405deg); 
    bottom: 0px; 
}

來源

2015-02-08 Clarke

好的應用程序應該做什麼。你能否詳細說明你的意思是「不工作」？ – Christophe 2015-02-08 12:28:08

-1

您加載之前使用JQuery 。所以改變你的加載順序，事情應該工作

來源

2015-02-08 12:17:14

我把我的src代碼後，如果加載頁面，它仍然不工作？ – Clarke 2015-02-08 12:23:56

由於您的.line類絕對定位，您的.menu沒有任何尺寸，所以不能點擊。如果你給.menu尺寸，它可以點擊。

看到這個小提琴：http://jsfiddle.net/h0an7ojx/7/

澄清關於支持僞元素的動畫。從歷史上看，webkit瀏覽器在動畫僞元素方面存在問題。 According to the research I carried out，這是固定的。但是，似乎在大約一年前（2014年初），這種修復方式被扭轉了。這個問題在眨眼瀏覽器中似乎也很明顯。因此，對於X瀏覽器支持，應該避免僞元素動畫。

即使在有支持的情況下，本例中的僞元素也可以位於文檔流之外，因此不會總是響應點擊事件。

來源

2015-02-08 12:23:51 dewd

與jsfiddle的問題是，變換-405度不起作用，導致這成爲1行當點擊作爲一個十字架？ – Clarke 2015-02-08 12:33:48

@Clarke奇怪。它工作正常。我只檢查了Firefox。只需檢查一下webkit瀏覽器就會發現它正在做你說的話。當我得到片刻時，我會看看。 – dewd 2015-02-08 16:17:14

謝謝@dewd，這是我的筆記本故障，因爲它可以在我的桌面上完美工作 – Clarke 2015-02-08 18:59:00

我的僞元素動畫不起作用

回答

相關問題