如何在父元素中的嵌套元素上调用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动画？

回答

相关问题