使用 animate.css 关闭引导模式答案

【问题标题】：Closing bootstrap modal with animate.css使用 animate.css 关闭引导模式
【发布时间】：2019-03-03 08:45:52
【问题描述】：

我在当前项目中使用了很多模式。我正在使用 Animated.css 库来制作动画。 - 问题是我想在模态关闭时使用动画。例如：打开模式 = flipInX / 关闭模式 = flipOutX

我见过很多这样的问题，但我无法让它为我工作。我希望效果适用于我的所有模态，而不仅仅是一个特定的。

 <div class="modal animated flipInX fade modal-fullscreen" id="info" tabindex="-1" role="dialog" aria-labelledby="d01" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">


                    </div>
                </div>
            </div>
        </div>
    </div>

【问题讨论】：

标签： css bootstrap-modal animate.css

【解决方案1】：

.modal {
    transiton: opacity 2s;
}

.modal-close {
    opacity: 0;
}

您可以添加类来在用户关闭模式时执行动画。

getElementById('btn-close-modal').classList.add('modal-close')

因此，模态将采用 modal-close 类中定义的动画的 0 能力

【讨论】：