动画显示块/无，并具有这样的特征

Question

所以，我会清楚地解释，我想对列表进行动画处理，例如，当我单击文章时，这会隐藏所有其他元素，并且仅在单击时显示所有相关文章

该内容在开始时相互替换，这是显示块/无的表演。

但是我不能对此进行动画处理，所以如果您有解决方案，我会接受它们！

我不在乎动画，我想了解原理。

谢谢

Answer 1

你可以像bdalina建议的那样使用jQuery隐藏元素，并显示唯一被点击的article。

// Hides all articles but the one clicked.
$('article').click(function(){
	$('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>

请也看看这个答案，它显示了解决问题的另一种方法。

希望这在某种程度上有所帮助。

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

j查询：

$('.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);