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

Question

请参阅jsfiddle。提前致谢！

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

堆叠 - 我可以使用 absolute 堆叠 div，但我似乎无法包裹 div 所以它保留了它想要的地方。（即我想要红色框中的 Incoming/Outgoing 文本）

Animation - divs 想要在两个动画运行ning 时堆叠（在动画编号 2 的延迟结束后）。我不能运行都 "inline/absolute" 吗？

$(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>

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>

我还会在 CSS 中将 overflow: hidden 添加到 .container2。

JSFIDDLE ---- [DCML] 更新到带有答案的版本

不幸的是，代码片段最多只支持 jQuery.

的 2.1.1 版本

[编辑]

值得注意的是，您遗漏了 id=Outgoing 和 id=Incoming 周围的引号。您还必须实际将 position: absolute 应用于这些元素，在这种情况下，您还需要将 height 值应用于 .container，因为 .container 不会遵守"inherent height" 个具有 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>

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

Stacking divs with fixed placeholder (and maintaining during animation)

html

css

jquery

jquery-animate