如何给 Bootstrap Datepicker Fade 效果？

Question

我在 Symfony 应用程序中使用Bootstrap Datepicker。我想在打开和关闭 Datepicker 时获得淡入淡出效果。由于该库没有任何处理此问题的文档，我有什么办法可以自己调整它吗？

以下是初始化 Datepicker 的 twig 文件：

{% block body %}
<div class="container-fluid">
    <div class="row">
        <div class="carousel" id="myCarousel" data-ride="carousel">
                <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>

            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="{{ asset('../../../../../images/image-1.jpg') }}">
                </div>

                <div class="item">
                    <img src="{{ asset('../../../../../images/image-2.jpg') }}">
                </div>

                <div class="item">
                    <img src="{{ asset('../../../../../images/image-3.jpg') }}">
                </div>
            </div>

           <div class="form-contents">
               <div class="row">
                   {{ form_start(form, {'attr': {'autcomplete':'off'}}) }}
                   {{ form_errors(form) }}

                   <div class="form-group col-xs-6">
                       {{ form_label(form.Place, 'Where') }}
                   </div>

                   <div class="form-group col-xs-6">

                       {{ form_label(form.Date, 'When') }}
                       {{ form_errors(form.Date) }}
                       {{ form_widget(form.Date, {'attr': {'class':'form-control','autcomplete':'off', 'placeholder':'Pick a day',
                                                    'data-provide':'datepicker', 'readonly':'', 'data-date-today-highlight':false,
                                                    'data-date-format':'dd/mm/yyyy', 'data-date-autoclose': true
                                                   }
                       })}}

                   </div>
               </div>

               <div class="row">
                   <div class="col-xs-12">
                       {{ form_row(form.save, {'attr': {'class':'btn btn-lg'}}) }}
                   </div>

                   {{ form_end(form) }}
               </div>
           </div>
           {{ parent() }}
       </div>
    </div>
</div>
{% endblock %}

Answer 1

http://codepen.io/anon/pen/grKwLz

我编辑了 bootstrap-datepicker.js 的源代码。查看第 479-486 行。

改变：

        this.picker.css("opacity", 0);
        this.picker.show();
        this.picker.animate(
            {
                "opacity": 1
            },
          400
        );