Question

所以，我会清楚地解释一下，我想动画列表，当我点击文章时，这会隐藏所有其他元素，只显示与点击相关的所有文章

该内容在开始时相互替换，即显示块/无的比较。

但我不能动画这个，所以如果你有一个解决方案，我会把它们拿走！

我不关心动画，我想了解原理。

感谢

Answer 1

您可以使用jQuery隐藏元素，例如建议的bdalina，并仅显示点击的article。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

动画显示块/无，具有相应的功能

2 个答案: