javascript - 动画显示块/无，按比例显示

因此，我将清楚地解释一下，我想为列表添加动画，例如，当我单击文章时，这将隐藏所有其他元素，并且仅显示与该点击相关的所有文章

该内容在一开始就进行了比较，这是显示块的比例/无。

但是我不能为此设置动画，所以如果您有解决方案，我会考虑的！

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

谢谢

最佳答案

您可以使用jQuery隐藏元素，如建议的bdalina并仅显示被单击的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>

也请have a look at this answer，它显示了解决该问题的另一种方法。

希望这会有所帮助。

关于javascript - 动画显示块/无，按比例显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45943466/