怎么让使用bootstrap框架的窗口分辨大小改变的时候,消失的组件有淡入淡出的效果。

Question

请问下，怎么让使用bootstrap框架的窗口分辨大小改变的时候,消失的组件有淡入淡出的效果呢？举个例子。<div class="container">     <div class="row">         <div class="col-md-9">           <div class="jumbotron hidden-sm hidden-xs ">         <h1 class="display-3">Hello, world!</h1>         <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>         </div>         </div>         <div class="col-md-3">           <div class="list-group"> <a href="#" class="list-group-item active">Dapibus ac facilisis in</a> <a href="#" class="list-group-item ">Dapibus ac facilisis in</a> <a href="#" class="list-group-item ">Dapibus ac facilisis in</a> <a href="#" class="list-group-item ">Dapibus ac facilisis in</a> <a href="#" class="list-group-item ">Dapibus ac facilisis in</a> <a href="#" class="list-group-item ">Dapibus ac facilisis in</a>     </div>         </div>     </div> </div>我想让其中的jumbotron 这个元素，在分辨缩小的时候消失，请问怎么再消失的时候添加淡入淡出的效果？。或者是有什么其他的别的实现方法么？

Answer 1

自己通过css3的过渡属性去实现呀。