アニメーション表示ブロック/なし、そのコンビネーションで

Question

私は明確に説明します。私はリストをアニメーションしたいと思います。たとえば記事をクリックすると、他のすべての要素が隠され、クリック

この内容は、最初に表示ブロック/なしの比較で比較されます。

しかし、私はそれらを取るソリューションを持っている場合、私はこれをアニメーションすることはできません！

私はアニメーションについて気にしない、私は原則を理解したい。

は悲しいこと

Answer 1

あなたはbdalinaようjQueryを使用して要素を隠すことができが提案され、クリックされただけ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という2つのステップのアニメーションを使用できます。

ここでは、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);