jquery - 使用固定占位符堆叠 div（并在动画期间保持）

Question

请参阅jsfiddle。先感谢您！

我正在尝试运行一个动画，其中一个单词滑入以替换现有单词。

堆叠- 我可以使用绝对堆叠 div，但我似乎无法包装 div，因此它保留了所需的位置。（即我想要红框中的传入/传出文本）

动画- 当两个动画都运行时（在动画编号 2 的延迟结束后），div 想要堆叠。我无法同时运行“内联/绝对”吗？

$(function() {
  $('#Action').click(function(e) {
    //start incoming
    Enter('#Incoming', 'fadeInRight');
    //add minor delay and then start outgoing
    setTimeout(function() {
      ExitAndHide('#Outgoing', 'fadeOutLeft');
    }, 2000);

  });
});

//outgoing function
function ExitAndHide(item, action) {
  $(item).removeClass().addClass(action + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    $(item).hide();
  });
};

//incoming function
function Enter(item, action) {
  $(item).css("display", "inline-block");
  $(item).removeClass().addClass(action + ' animated');
};

.stackable {
  position: absolute;
  display: inline-block
}

.container {
  position: relative;
  width: 100%;
  border: 1px solid #000;
}

.container2 {
  position: relative;
  width: 100%;
  border: 1px solid #FF0000;
}

.fadeOutLeft {
  animation-name: fadeOutLeft
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0)
  }
  to {
    opacity: 1;
    transform: none
  }
}

.fadeInRight {
  animation-name: fadeInRight
}

.text-center {
  text-align: center !important;
  font-size: xx-large;
}

.animated {
  animation-duration: 5s;
  animation-fill-mode: both
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0)
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" text-center">
  <div class="container">
    <div class="container2">
      Content Should be here
    </div>
    <div id=Outgoing class="stackable">
      <strong>Outgoing</strong>
    </div>
    <div id=Incoming class="stackable">
      <strong>Incoming</strong>
    </div>
  </div>
  <button id=Action>Action</button>
</div>

标签： jqueryhtmlcssjquery-animate

Answer 1

如果您想要元素中的内容<div class="container2">，那么您应该将其放置在 HTML 中。

<div class=" text-center">
  <div class="container">
    <div class="container2">

      <div id="Outgoing" class="stackable">
        <strong>Outgoing</strong>
      </div>
      <div id="Incoming" class="stackable">
        <strong>Incoming</strong>
      </div>

    </div>
  </div>      
  <button id=Action>Action</button>
</div>

我也会添加overflow: hidden到.container2CSS 中。

JSFIDDLE ---- [DCML] 已更新为带答案的版本

不幸的是，代码片段只支持 jQuery 的 2.1.1 版本。

[ 编辑 ]

值得注意的是，您缺少 and 周围的id=Outgoing引号id=Incoming。您还必须实际应用position: absolute到这些元素，在这种情况下，您还需要对 应用一个height值.container，因为.container不会尊重带有 的元素的“固有高度” position: absolute。

JSFIDDLE 和代码片段已相应更新。

$(function() {

  $('#Action').click(function(e) {
    //start incoming
    Enter('#Incoming', 'fadeInRight');
    //add minor delay and then start outgoing
    setTimeout(function() {
      ExitAndHide('#Outgoing', 'fadeOutLeft');
    }, 2000);

  });
});

//outgoing function
function ExitAndHide(item, action) {
  $(item).removeClass().addClass(action + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    $(item).hide();
  });
};

//incoming function
function Enter(item, action) {
  $(item).css("display", "inline-block");
  $(item).removeClass().addClass(action + ' animated');
};

#Incoming, #Outgoing {
  position: absolute;
}

.stackable {
  position: absolute;
  display: inline-block
}

.container {
  position: relative;
  width: 100%;
  border: 1px solid #000;
}

.container2 {
  position: relative;
  width: 100%;
  border: 1px solid #FF0000;
  
  height: 100px;
  overflow: hidden;
}
.fadeOutLeft {
  animation-name: fadeOutLeft
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0)
  }
  to {
    opacity: 1;
    transform: none
  }
}

.fadeInRight {
  animation-name: fadeInRight
}

.text-center {
  text-align: center !important;
  font-size: xx-large;
}

.animated {
  animation-duration: 5s;
  animation-fill-mode: both
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0)
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" text-center">
  <div class="container">
    <div class="container2">

      <div id="Outgoing" class="stackable">
        <strong>Outgoing</strong>
      </div>
      <div id="Incoming" class="stackable">
        <strong>Incoming</strong>
      </div>

    </div>
  </div>      
  <button id=Action>Action</button>
</div>