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);