怎么让使用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的过渡属性去实现呀。