html - 如何否定CSS中的运动

Question

如果元素的父元素应用了过渡，我想知道如何计算或否定该元素的移动。

例如，我有一个具有以下标记的轮播:

<ul class="carousel" style="position:relative;">
<li class="item active">
    text content 1. Will move with the slide.
    <div class="fixed-content">
     I want to remain where I am and I have the exact same content as the fixed element below
    </div>
<li>
<li class="item">
    text content 2. Will move with the slide.
    <div class="fixed-content">
     I want to remain where I am and I have the exact same content as the fixed element above
    </div>
<li>
</ul>

然后在 active 从一个 item 切换到另一个 item 的过渡过程中，它添加了一个类 left/right，prev/next，这取决于哪个 div 将被激活。然后删除这些类。

如果它有这些类，它将应用 css 转换:translateX(-100%) [或转换:translateX(100%)] 到 .item 元素，它具有 .6s 的过渡持续时间和 ease-输出选项。

现在，我想对 .fixed-content 使用 css 动画，使其看起来“静态”或“固定”。我如何在动画关键帧中写入它？以及用于计算过渡持续时间是否已更改的公式是什么？

附言。我知道，我可以重新排列元素，以便我可以将 .fixed-content 放在 .items 之外，并为其分配一个 position:absolute 属性，但让我们假装我无法做到这一点。 ;)

Answer 1

我不喜欢这个标记，它只是一个踢球悬停效果(不是旋转木马)，但我相信是这样的。

http://codepen.io/joaosaro/pen/oLZmRr

<ul class="carousel" style="position:relative;">
  <div class="wrap">
    <li class="item one">text content 1. Will move with the slide.</li>
    <li class="item two">text content 2. Will move with the slide.</li>
    <div class="fixed-content">I want to remain where I am and I have the exact same content as the fixed element above</div>
  </div>
</ul>


ul {
  position: fixed;
  margin: 50px auto;
  width: 300px;
  height: 300px;
  cursor: pointer;
}
ul .wrap {
  position: relative;
  background: pink;
  height: 100%;
  width: 100%;
  border: 2px solid black;
  overflow: hidden;
}
ul .wrap li {
  height: 100%;
  width: 100%;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
ul .wrap li.one {
  background-color: yellow;
}
ul .wrap li.two {
  background-color: red;
}
ul .wrap .fixed-content {
  position: absolute;
  z-index: 100;
  bottom: 0;
  background: blue;
}
ul:hover .wrap li {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}