jquery - 如何使用 jquery 显示自定义 css 动画并在不支持时回退到 show()？

Question

我最初想隐藏一个元素并使用 jquery 触发一个 css 动画。如果浏览器不支持 css 动画，我需要它退回到只使用 $(element).show()。

这是我到目前为止的 fiddle

http://jsfiddle.net/SSsVx/30/

<div id="submit-logged-out" class="popout">
    foo
</div>

#submit-logged-out {
background: #000;
color: #fff;
    width:80%;
}
    .popout {
        animation: popout 0.25s ease;
        -webkit-animation: popout 0.25s ease;
    }
    @keyframes popout {
        from{transform:scale(0)}
        80%{transform:scale(1.05)}
        to{transform:scale(1)}
    }
    @-webkit-keyframes popout {
        from{-webkit-transform:scale(0)}
        80%{-webkit-transform:scale(1.05)}
        to{-webkit-transform:scale(1)}
    }

Answer 1

只检测是否支持 CSS 动画，如果不支持则回退:

if ('animation' in document.body.style) {
    //    Make sure you use all vendor prefixes
    console.log('We have animations')
} else {
    console.log('Fallback')
    $('#submit-logged-out').show()
}

这是一个演示:http://jsfiddle.net/SSsVx/32/