如何在父元素中的嵌套元素上調用CSS動畫？

我正在尋找父母的焦點時從嵌套的div元素中移除一個類。然後，我想用另一個具有將自動播放的CSS動畫替換該類。我期望在同一個類中的多個元素中執行此操作，因此它需要能夠處理多個元素。我不知道該怎麼做，因爲我已經達到了我認爲我應該在這一點上，但無濟於事的地方。如何在父元素中的嵌套元素上調用CSS動畫？

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>title</title> 
</head> 
<style> 

<style> 

    div { 
    filter: opacity(0%); 
    background-color: red; 
    width: 300px; 
    height: 300px; 
    position: relative; 
    top: 50%; 
    left: 50%; 
    z-index: 1; 
} 

.noGrow { 

} 

.grow { 
    animation-name: derp; 
    animation-duration: 1s; 
    filter: opacity(100%); 
} 

@keyframes derp { 
    from{width: 0px;} 
    to{width: 300px;} 

} 

</style> 

<body> 
<span id="divHolder" tabindex="1"> 
<div class="noGrow firstDiv"> 
</div> 
</span> 


</body> 
<script src="jquery.js"> </script> 
<script> 

var divHolder = $(".divHolder"); 
var firstDiv = $(".firsDiv"); 

divHolder.focus(function() { 
    if($(".firstDiv").hasClass("noGrow")){ 
    $(this).removeClass("noGrow"); 
    $(this).addClass("grow"); 
    console.log("It's working."); 
    } 
}); 

</script> 

</html>

謝謝你的任何和所有幫助。非常感謝。

來源

2017-03-17 Nick Nutting

能否請您解釋一下這個問題，我看到這個代碼按預期工作 –

你並不需要添加/刪除'noGrow'類，因爲它沒有功能的目的... –

看你的代碼，這兩條線似乎是這個問題：

$(this).removeClass("noGrow"); 
$(this).addClass("grow");

$（這）是指divHolder元素你要綁定的焦點事件。如果你想改變類firstDiv的，你需要的線路改成這樣：

firstDiv.removeClass('noGrow'); 
firstDiv.addClass('grow');

然而，根據您的CSS，我會建議使用toggleClass，並留下noGrow類完全關閉。您的DIV變爲：

<div class="firstDiv"></div>

和你的JS變爲：

divHolder.focus(function() { 
    firstDiv.toggleClass('grow'); 
    console.log('growing!'); 
});

最後，如果你不知道在子孫的列表中選擇「可擴展的」格會，你可以使用像找到（）：

divHolder.focus(function(){ 
    $(this).find('div').toggleClass('grow'); 
    // if the div is given an id like #growable we can do this: 
    // $(this).find('#growable').toggleClass('grow'); 
});

來源

2017-03-17 18:27:13 Cruiser

在我如何輸入這一點，但我的部分有一些錯誤，但工作巡洋艦！非常感謝。 –

如何在父元素中的嵌套元素上調用CSS動畫？

回答

相關問題