Twitter bootstrap 更改引导模式效果

我发现了这个

这个演示有一个很好的效果，我想知道是否有人有办法将这个演示应用于引导模式，使其易于使用

---

特别是第一个（淡入和缩放）

如果您查看与模式窗口一起使用的引导

Fade

类，您会发现它所做的一切，就是将

opacity

值设置为

0

，并为

opacity

规则添加一个转换

无论何时启动模式，都会添加类中的

，并将
不透明度
的值更改为
1

知道您可以轻松构建自己的
fade scale
类

这里有一个例子


@导入url（“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
.渐变比例{
变换：比例（0）；
不透明度：0；
-webkit过渡：全部.25s线性；
-o-过渡：全部为.25s线性；
过渡：全部.25s线性；
}
.fade-scale.in{
不透明度：1；
变换：比例（1）；
}

启动演示模式
&时代；
情态标题
...
接近
保存更改
这里是纯溶液


好啊

.fade2{
变换：比例（0.9）；
不透明度：0；
过渡：全部.2s线性；
显示：块！重要；
}
.fade2.show{
不透明度：1；
变换：比例（1）；
}

$（'exampleModal'）.modal（）；
模式转换后的功能（e）{
e、 setAttribute（“样式”，“显示：无！重要；”）；
}
$（'exampleModal'）.on（'hide.bs.modal'，function（e）{
setTimeout（（）=>afterModalTransition（this），200）；
})

完整的例子

也许它会帮助别人

--

也谢谢@DavidDomain。
解决方案：

我的riot.js示例将动画模态标记嵌套在订单配置文件标记中

注意，这假设jquery和riot.js在之前已加载

动画模态标记内容：

<a id='{ opts.el }' href="" class='pull-right'>edit</a>

    <div class="modal animated" id="{ opts.el }-modal" tabindex="-1" role="dialog" aria-labelledby="animatedModal">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button onclick={ cancelForm } id='{ opts.el }-cancel-1' type="button" class="close" ><span>&times;</span></button>
            <h4 class="modal-title" id="animatedModal">{ opts.title }</h4>
          </div>
          <div class="modal-body">
              <yield/>
          </div>
          <div class="modal-footer">
            <button onclick={ cancelForm } id='{ opts.el }-cancel-2' onclick={ cancelForm } type="button" class="btn btn-default">Close</button>
            <button onclick={ saveForm } type="button" class="btn btn-primary">Save changes</button>
          </div>

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

    <script>
    var self = this
    self.modalBtn = `#${opts.el}`
    self.modal = `#${opts.el}-modal`
    self.animateInClass = opts.animatein || 'fadeIn'
    self.animateOutClass = opts.animateout || 'fadeOut'
    self.closeModalBtn = `#${ opts.el }-cancel-1, #${ opts.el }-cancel-2`
    self.animationsStr = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'

    this.on('mount',function(){
        self.initModal()
        self.update()
    })

    this.initModal = function(){
        modal = $(self.modal)
        modalBtn = $(self.modalBtn)
        closeModalBtn = `#${ opts.el }-cancel-1`

        modalBtn.click(function(){
            $(self.modal).addClass(self.animateInClass)
            $(self.modal).modal('show') 
        })

        $(self.modal).on('show.bs.modal',function(){
            $(self.closeModalBtn).one('click',function(){
                $(self.modal).removeClass(self.animateInClass).addClass(self.animateOutClass)

                $(self.modal).on(self.animationsStr,function(){
                    $(self.modal).modal('hide') 
                })
            })
        })

        $(self.modal).on('hidden.bs.modal',function(evt){
            $(self.modal).removeClass(self.animateOutClass)
            $(self.modal).off(self.animationsStr)
            $(self.closeModalBtn).off('click')
        })
    }

    this.cancelForm = function(e){
        this.parent.cancelForm()
    }

    this.showEdit = function(e){
        this.parent.showEdit()
    }

    this.saveForm = function(e){
        this.parent.saveForm()
    }

    dashboard_v2.bus.on('closeModal',function(){
        try{
            $(`#${ opts.el }-cancel-1`).trigger('click')
        }catch(e){}

    })
</script>

<div class="row">
        <div class="col-md-12">
            <div class="eshop-product-body">

                <animated-modal>
                    title='Order Edit'
                    el='order-modal-1'>

                    <div class="row">
                        <div class="col-md-6 col-md-offset-3">
                            <form id='profile-form'>
                                <div class="form-group">
                                    <label>Organization</label>
                                    <input id='organization' type="text" class="form-control" id="exampleInputEmail1" placeholder="Email">
                                </div>

                                <div class="form-group">
                                    <label>Contact</label>
                                    <input id='contact' type="text" class="form-control" id="exampleInputEmail1" placeholder="Email">
                                </div>

                                <div class="form-group">
                                    <label>Phone</label>
                                    <input id='phone' type="text" class="form-control" id="exampleInputEmail1" placeholder="Email">
                                </div>

                                <div class="form-group">
                                    <label>Email</label>
                                    <input id='email' type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                                </div>
                            </form>
                        </div>
                    </div>

                </animated-modal>

                <h3>Profile</h3>

                <ul class='profile-list'>
                    <li>Organization: { opts.data.profile.organization }</li>
                    <li>Contact: { opts.data.profile.contact_full_name }</li>
                    <li>Phone: { opts.data.profile.phone_number }</li>
                    <li>Email: { opts.data.profile.email }</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        var self = this     

        this.on('mount',function(){

        })

        this.cancelForm = function(e){

        }

        this.showEdit = function(e){

        }

        this.saveForm = function(e){

        }
    </script>


&时代；
{opts.title}
接近
保存更改
var self=这个
self.modalBtn=`${opts.el}`
self.modal=`#${opts.el}-modal`
self.animateInClass=opts.animatein | | fadeIn'
self.animateOutClass=选择.animateout | |淡出'
self.closeModalBtn=`${opts.el}-cancel-1，\${opts.el}-cancel-2`
self.animationstr='webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'
this.on（'mount'，function（）{
self.initModal（）
self.update（）
})
this.initModal=函数（）{
模态=$（self.modal）
modalBtn=$（self.modalBtn）
closeModalBtn=`${opts.el}-cancel-1`
modalBtn.单击（函数（）{
$（self.modal）.addClass（self.animateInClass）
$（self.modal）.modal（'show'）
})
$（self.modal）.on（'show.bs.modal'，function（）{
$（self.closeModalBtn）.one（'click'，function（）{
$（self.modal）.removeClass（self.animateInClass）.addClass（self.animateOutClass）
$（self.modal）.on（self.animationstr，function（））{
$（self.modal）.modal（'hide'）
})
})
})
$（self.modal）.on（'hidden.bs.modal'，函数（evt）{
$（self.modal）.removeClass（self.animateOutClass）
$（self.modal）.off（self.animationstr）
$（self.closeModalBtn）.off（'click'）
})
}
this.cancelForm=函数（e）{
this.parent.cancelForm（）
}
this.showEdit=函数（e）{
this.parent.showEdit（）
}
this.saveForm=函数（e）{
this.parent.saveForm（）
}
仪表板2.bus.on（'closeModal'，function（）{
试一试{
$（`opts.el}-cancel-1`）。触发器（'click'）
}捕获（e）{}
})


以及要嵌套的配置文件标记：

配置文件标签内容：

<a id='{ opts.el }' href="" class='pull-right'>edit</a>

    <div class="modal animated" id="{ opts.el }-modal" tabindex="-1" role="dialog" aria-labelledby="animatedModal">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button onclick={ cancelForm } id='{ opts.el }-cancel-1' type="button" class="close" ><span>&times;</span></button>
            <h4 class="modal-title" id="animatedModal">{ opts.title }</h4>
          </div>
          <div class="modal-body">
              <yield/>
          </div>
          <div class="modal-footer">
            <button onclick={ cancelForm } id='{ opts.el }-cancel-2' onclick={ cancelForm } type="button" class="btn btn-default">Close</button>
            <button onclick={ saveForm } type="button" class="btn btn-primary">Save changes</button>
          </div>

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

    <script>
    var self = this
    self.modalBtn = `#${opts.el}`
    self.modal = `#${opts.el}-modal`
    self.animateInClass = opts.animatein || 'fadeIn'
    self.animateOutClass = opts.animateout || 'fadeOut'
    self.closeModalBtn = `#${ opts.el }-cancel-1, #${ opts.el }-cancel-2`
    self.animationsStr = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'

    this.on('mount',function(){
        self.initModal()
        self.update()
    })

    this.initModal = function(){
        modal = $(self.modal)
        modalBtn = $(self.modalBtn)
        closeModalBtn = `#${ opts.el }-cancel-1`

        modalBtn.click(function(){
            $(self.modal).addClass(self.animateInClass)
            $(self.modal).modal('show') 
        })

        $(self.modal).on('show.bs.modal',function(){
            $(self.closeModalBtn).one('click',function(){
                $(self.modal).removeClass(self.animateInClass).addClass(self.animateOutClass)

                $(self.modal).on(self.animationsStr,function(){
                    $(self.modal).modal('hide') 
                })
            })
        })

        $(self.modal).on('hidden.bs.modal',function(evt){
            $(self.modal).removeClass(self.animateOutClass)
            $(self.modal).off(self.animationsStr)
            $(self.closeModalBtn).off('click')
        })
    }

    this.cancelForm = function(e){
        this.parent.cancelForm()
    }

    this.showEdit = function(e){
        this.parent.showEdit()
    }

    this.saveForm = function(e){
        this.parent.saveForm()
    }

    dashboard_v2.bus.on('closeModal',function(){
        try{
            $(`#${ opts.el }-cancel-1`).trigger('click')
        }catch(e){}

    })
</script>

<div class="row">
        <div class="col-md-12">
            <div class="eshop-product-body">

                <animated-modal>
                    title='Order Edit'
                    el='order-modal-1'>

                    <div class="row">
                        <div class="col-md-6 col-md-offset-3">
                            <form id='profile-form'>
                                <div class="form-group">
                                    <label>Organization</label>
                                    <input id='organization' type="text" class="form-control" id="exampleInputEmail1" placeholder="Email">
                                </div>

                                <div class="form-group">
                                    <label>Contact</label>
                                    <input id='contact' type="text" class="form-control" id="exampleInputEmail1" placeholder="Email">
                                </div>

                                <div class="form-group">
                                    <label>Phone</label>
                                    <input id='phone' type="text" class="form-control" id="exampleInputEmail1" placeholder="Email">
                                </div>

                                <div class="form-group">
                                    <label>Email</label>
                                    <input id='email' type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                                </div>
                            </form>
                        </div>
                    </div>

                </animated-modal>

                <h3>Profile</h3>

                <ul class='profile-list'>
                    <li>Organization: { opts.data.profile.organization }</li>
                    <li>Contact: { opts.data.profile.contact_full_name }</li>
                    <li>Phone: { opts.data.profile.phone_number }</li>
                    <li>Email: { opts.data.profile.email }</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        var self = this     

        this.on('mount',function(){

        })

        this.cancelForm = function(e){

        }

        this.showEdit = function(e){

        }

        this.saveForm = function(e){

        }
    </script>


title='Order Edit'
el='order-modal-1'>
组织机构
接触
电话
电子邮件
轮廓

组织：{opts.data.profile.Organization}
联系人：{opts.data.profile.Contact_全名}
电话：{opts.data.profile.Phone_number}
电子邮件：{opts.data.profile.Email}

var self=这个
this.on（'mount'，function（）{
})
this.cancelForm=函数（e）{
}
this.showEdit=函数（e）{
}
this.saveForm=函数（e）{
}

我从css复制了模型代码并添加了以下css。这段代码提供了漂亮的动画。你可以试试

.modal.fade .modal-dialog {
     -webkit-transform: scale(0.1);
     -moz-transform: scale(0.1);
     -ms-transform: scale(0.1);
     transform: scale(0.1);
     top: 300px;
     opacity: 0;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
}

.modal.fade.in .modal-dialog {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
    opacity: 1;
}

正文{
文本对齐：居中；
填充：50px；
}
.modal.fade{
不透明度：1；
}
.modal.fade.modal对话框{
-webkit转换：转换（0）；
-moz变换：平移（0）；
变换：平移（0）；
}
.btn黑色{
位置：绝对位置；
底部：50px；
transfo
<script>
    $(document).ready(function () {
    // BS MODAL OPEN CLOSE EFFECT  ---------------------------------
        var timeoutHandler = null;
        $('.modal').on('hide.bs.modal', function (e) {
            var anim = $('.modal-dialog').removeClass('bounceInDown').addClass('fadeOutDownBig'); // Model Come class Remove & Out effect class add
            if (timeoutHandler) clearTimeout(timeoutHandler);
            timeoutHandler = setTimeout(function() {
                $('.modal-dialog').removeClass('fadeOutDownBig').addClass('bounceInDown'); // Model Out class Remove & Come effect class add
            }, 500); // some delay for complete Animation
        });
    });
    </script>




.custom-modal-header
{
    display: block;
}
.custom-modal .modal-content
{
    width:500px;
    border: none;
}
.custom-modal
{
    display: block !important;
}
.custom-fade .modal-dialog {
    transform: translateY(4%);
    opacity: 0;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
    will-change: transform;
}
.custom-fade.in .modal-dialog  {
    opacity: 1;
    transform: translateY(0%);
}