Question

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

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

CSS包含转换以解释“弹出”效果。似乎黄牌正在获得“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转换冲突

1 个答案: