代码之家 › 专栏 › 技术社区 › cholox

引导动画无法按预期工作

twitter-bootstrap-4 animation twitter-bootstrap jquery javascript

cholox · 技术社区 · 7 年前

你可以找到引导动画 here . 我想在动画完成后删除它。在网站上,你可以找到一个触发器,这应该有助于实现这一点。问题是,当我单击按钮时,类会立即被删除。

<button class="btn btn-primary" onclick="foo(this)">Press here</button>
<script>
function foo(element){
    $(element).addClass("animated shake");
    $(element).on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', $(element).removeClass("animated shake"));
    }
</script>

1 回复 | 直到 7 年前

Dario 7 年前

只需为动画的持续时间添加一个超时,以等待动画完成:

function foo(element){
    $(element).addClass("animated shake");
    var duration = $(element).css("animation-duration"); 
    setTimeout(function() { 
        $(element).removeClass("animated shake"); 
    }, duration);
}

推荐文章

Snappawapa · Bootstrap 4使导航栏项目在小屏幕上一直扩展,没有按钮

7 年前

cholox · 引导动画无法按预期工作

7 年前

Spincel · 当父容器设置为特定高度时,iOS 9上的Flexbox项会缩小

7 年前

William Entriken · 排列不同尺寸的徽章

7 年前

louie171 · 在bootstrap 4中更改列之间的填充(如果可能,通过变量)

7 年前

core114 · 引导4导航下拉列表问题

7 年前

Tim Kruger · 使用jquery验证1.17.0和Bootstrap 4.0.0测试版

7 年前

user687554 · 引导4-垂直居中列表项

7 年前

Ivan Vilanculo ScaisEdge · 为什么引导同时显示两个选项卡?

7 年前

David · Bootstrap 4 hidden-X-(down/up)类不工作

7 年前