莫代爾關閉動畫

有人可以幫助我與B3模態動畫使用animate.css？檢查animate.css這裏：https://github.com/daneden/animate.css 莫代爾關閉動畫

我已經包括了「bounceInLeft」當模式打開，我想用「bounceOutRight」它關閉時。

這裏是我的jsfiddle：http://jsfiddle.net/shan12/25WHg/

HTML：

<!-- Modal --> 
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div>

JS：

$('#myModal').addClass('animated bounceInLeft');

親切的問候。

來源

2014-05-07 Shahen Algoo

你可以嘗試以下方法：

$("#myModal").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function (e) { 
    if (e.originalEvent.animationName == "bounceOutRight") { 
    $(".modal-backdrop").remove(); 
    $(".modal").remove(); 
    } 
}); 

$('#myModal').on('hide.bs.modal', function (e) { 
    $('#myModal').addClass('bounceOutRight'); 
    return e.preventDefault(); 
});

這是JSFIDDLE

來源

2014-05-07 20:24:07

它的工作，但黑色覆蓋停留。 –

它有一個錯誤我：e只工作一次 –

它更像是一個變通。

var hideDelay = true; 
$('#myModal').on('hide.bs.modal', function(e) { 
    if (hideDelay) { 
    $('.modal-content').removeClass('animated bounceInLeft').addClass('animated bounceOutRight'); 
    hideDelay = false; 
    setTimeout(function() { 
     $('#myModal').modal('hide'); 
     $('.modal-content').removeClass('animated bounceOutRight').addClass('animated bounceInLeft'); 
    }, 700); 
    return false; 
    } 
    hideDelay = true; 
    return true; 
});

檢查添加動畫類'.modal內容'，而不是'#myModal'。

這裏是小提琴http://jsfiddle.net/25WHg/43/

來源

2016-09-07 10:55:50

莫代爾關閉動畫

回答

相關問題