jQuery Append/CSS 转换冲突

Question

正在尝试重新创建卡片组点击浏览图库效果类似于：http://www.susannechmela.de/

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

CSS 包含转换以解释 "pop in" 效果。看起来黄牌同时获得了 "li + li" 和 "li + li + li" 转换。

有没有我遗漏的简单的东西？我已经改变了他们被添加和重新添加的顺序。卡片需要按照取走时的相反顺序堆叠（重建原始堆叠）。

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>

jQuery Append/CSS 转换冲突

jQuery Append/CSS transition conflicts

css

jquery

css-transitions