jquery - 在窗口调整大小时禁用 CSS 动画

Question

我有一个 CSS 动画，它使 Logo 在窗口加载时变大，然后将其缩小到原来的大小。效果很好，但是如果我缩小窗口然后再次变大，动画会重播。有没有什么办法可以合并 jQuery(或 CSS 修复程序)，它会在加载一次后禁用动画？我以为我可以用 animation-play-state: paused; 做点什么，但我想让它播放一次，所以我不确定我该怎么做。

也许 onLoad 分配类，然后在动画完成后取消分配类。只是想这可能有用吗？任何人对我将如何去做有任何想法？

#logo {
    max-width: 260px;
    height: auto;
    width: 40%;
    -webkit-animation: animate 3s ease;
-moz-animation: animate 3s ease;
-ms-animation: animate 3s ease;
-o-animation: animate 3s ease;
}

谢谢!

Answer 1

您可以通过测试更改后的 CSS 属性和相应的行为来使用 JQuery:

例如:查询:

    $(document).ready(function() {
    // run test on initial page load
    checkSize();

    // run test on resize of the window
    $(window).resize(checkSize);
});

//Function to the css rule
function checkSize(){
    if ($(".logo").css("float") == "none" ){
        // your code here
    }
}

你的CSS:

    .logo {float:left;}
@media only screen and (max-width: 800px){
    .logo {float:none;}
}

source