追加/CSS过渡冲突

Question

尝试重新创建卡片堆栈点击画廊效果类似:http://www.susannechmela.de/

我有JS添加点击卡到另一个UL，然后，在到达最后一个，将它们移回第一个列表。

CSS包含了用于解释"pop in"效果的过渡。这张黄牌似乎同时得到了"里+里"one_answers"里+里+里"的过渡。

有什么简单的我错过了吗?我改变了它们相加和再相加的顺序。这些牌需要按照被拿走时的相反顺序堆叠(重建原来的堆叠)。

html:

<div>
<ul id="first">
<li><img></li>
<li><img></li>
<li><img></li>
</ul>
<ul id="first_hidden">
</ul>
</div>

http://codepen.io/anon/pen/vOwzrO

Answer 1

我将创建一个相对定位的容器，并在其中创建绝对定位的子元素。你应该用JQuery修改子元素的位置和层通过z-index。参见下面的演示

// reset stack
function showAllCards(thisStack) {
  var allCards = thisStack.find('span');
  $(allCards.get().reverse()).each(function(i) {
    var time = i * 150;
    var card = $(this);
    setTimeout(function() {
      card.addClass('show');
    }, time);
  });
}
// set up cards in stack
$($(".stack span").get().reverse()).each(function(i) {
  console.log(i);
  var thisCard = $(this);
  var offset = 10 * i;
  thisCard.css({
    'right': offset + 'px',
    'top': offset + 'px',
    'z-index': i
  });
});
// click stack
$('.stack').click(function() {
  var thisStack = $(this);
  var nextCard = $(this).find('span.show').first();
  nextCard.toggleClass('show');
  if (nextCard.hasClass('last')) {
    showAllCards(thisStack);
  }
});

body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
div.stack {
  position: relative;
  display: block;
  background: #ccc;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
div.stack:hover {
  cursor: pointer;
}
span {
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
  position: absolute;
  top: 0px;
  right: 0px;
  opacity: 0;
  border: 1px solid #333;
  background: #fff;
  font-family: monospace;
  transition: opacity 0.3s;
}
.show {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stack">
  <span class="show">First</span>
  <span class="show">Second</span>
  <span class="show">Third</span>
  <span class="last show">Fourth</span>
</div>