Question

我有一组带位置的div：绝对我想在点击链接时设置动画。 div应该从底部滑到顶部并成为顶部div。（就像从顶部的牌组中放一张牌。）如果我取出动画，div将会到达顶部，但是动画不会。我知道它与z-index有关，但我不知道如何用动画设置它。

$('a').on('click', function(e) {
  e.preventDefault();
  $('.card').removeClass('active');
  $($(this).attr('href')).addClass('active');

});

.card {
  position: absolute;
  width: 300px;
  height: 300px;
}

#card1 {
  background: blue;
}

#card2 {
  background: red;
}

#card3 {
  background: yellow;
}

#card4 {
  background: green;
}

ul li {
  display: inline
}

.active {
  /* z-index:1;  */
  animation: newCard 2s ease 1;
}

@keyframes newCard {
  50% {
    transform: translateX(400px)
  }
  100% {
    z-index: 999
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="#card1">card1</a></li>
    <li><a href="#card2">card2</a></li>
    <li><a href="#card3">card3</a></li>
    <li><a href="#card4">card4</a></li>

  </ul>
</nav>
<div class='cards'>
  <div id="card1" class="card">1</div>
  <div id="card2" class="card">2</div>
  <div id="card3" class="card">3</div>
  <div id="card4" class="card">4</div>
</div>

感谢任何帮助！

Answer 1

我已对您的点击功能进行了一些更改，方法是将 animationend 与您选择的卡绑定。

$('a').on('click', function(e) {
  e.preventDefault();
  $('.card').removeClass('active');
  var id =$(this).attr('href');  
  $($(this).attr('href')).addClass('active');
$(id).bind("animationend",function(){$(id).css( "zIndex", 1 );});
});

这是小提琴：https://jsfiddle.net/j2on20s8/

Answer 2

咨询此页面，您可以找到许多可以帮助您的过渡：Transition Article

或者，如果您愿意，请查看整篇文章：Page Transition Article

Answer 3

我认为您可能正在寻找的是在关键帧的末尾保持动画更改，为此，将以下属性添加到.active类：

.active {
  animation: newCard 2s ease 1;
  animation-fill-mode: forwards;
}

注意这样做很有效，但是你会注意到，只要你点击一个链接，最后一张卡就会在新卡放在它之前弹出到顶部。要真正订购卡片，您必须保留一堆卡片对象并动态更改每次点击的z-index。

＆＃13;

$('a').on('click', function(e) {
  e.preventDefault();
  $('.card').removeClass('active');
  $($(this).attr('href')).addClass('active');

});

＆＃13;

.card {
  position: absolute;
  width: 300px;
  height: 300px;
}

#card1 {
  background: blue;
}

#card2 {
  background: red;
}

#card3 {
  background: yellow;
}

#card4 {
  background: green;
}

ul li {
  display: inline
}

.active {
  animation: newCard 2s ease 1;
  animation-fill-mode: forwards;
}

@keyframes newCard {
  50% {
    transform: translateX(400px)
  }
  100% {
    z-index: 999
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="#card1">card1</a></li>
    <li><a href="#card2">card2</a></li>
    <li><a href="#card3">card3</a></li>
    <li><a href="#card4">card4</a></li>

  </ul>
</nav>
<div class='cards'>
  <div id="card1" class="card">1</div>
  <div id="card2" class="card">2</div>
  <div id="card3" class="card">3</div>
  <div id="card4" class="card">4</div>
</div>

＆＃13;

动画完成后更改z-index

3 个答案: