Animate display block/none，with the comportement that

Question

所以，我會解釋清楚，我想動畫一個列表，當我點擊文章例如，這隱藏所有其他的元素，只顯示所有相關的文章點擊

該內容相互替換比較在開始時是顯示塊/無比例。

但我不能動畫，所以如果你有解決方案，我把它們！

我不在乎動畫，我想了解原理。

感謝

Answer 1

可以隱藏這些元件，使用jQuery像bdalina建議，並表示只有被點擊的article。

// Hides all articles but the one clicked. 
 
$('article').click(function(){ 
 
\t $('article').slideUp(); 
 
    $(this).slideDown(); 
 
});

body { 
 
    font-family: sans-serif; 
 
    background: #003B93; 
 
} 
 

 
section { 
 
    width: 200px; 
 
    margin: 20px auto; 
 
} 
 

 
article { 
 
    cursor: pointer; 
 
    margin-bottom: 20px; 
 
    text-align: center; 
 
    background: #BABABA; 
 
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); 
 
    width: 150px; 
 
    padding: 20px; 
 
    border-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    <article>First article.</article> 
 
    <article>Second article.</article> 
 
    <article>Third article.</article> 
 
    <article>Fourth article.</article> 
 
    <article>Fifth article.</article> 
 
</section>

請have a look at this answer中，也顯示了另一種解決問題的方法。

希望這有助於某種方式。

Answer 2

可悲的是，但block和none之間的動畫是不可能的。

相反，您可以使用兩個步驟動畫opacity。

下面是一個使用css偏置的例子。

HTML：

... 
<div class="block opacity hidden">...</div> 
... 

CSS（不要忘記加上transition）：

.block { 
    display: block; 
    opacity: 1; 
} 

.block.opacity { 
    opacity: 0; 
} 

.block.hidden { 
    display: none; 
} 

的jQuery：

$('.block').removeClass('hidden'); // the block is still invisible 
setTimeout(function() { 
    $('.block').removeClass('opacity'); // now the block is visible 
}, 100); // small delay is needed, better if it's equal the transition time 

很簡單。作爲替代方案，您可以使用.fadeIn()和.fadeOut()方法或.animate()。

UPD

你應該記得在反向功能超時必須等於transition的持續時間或元素將動畫結束前被隱藏。

$('.block').addClass('opacity'); 
setTimeout(function() { 
    $('.block').addClass('hidden'); 
}, 100); 

UPD2

JS：

var el = document.getElementsByClassName('block'); 
el.classList.remove('hidden'); 
setTimeout(function() { 
    el.classList.remove('opacity'); 
}, 100);