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>

然后在转换期间，当活动从一个项目切换到另一个项目时，它会向左/右，prev / next添加一个类，具体取决于下一个div将处于活动状态。然后删除这些类。

如果它有这些类，它会将css转换：translateX（-100％）[或transform：translateX（100％）]应用于.item元素，它的转换持续时间为.6s，并且容易 - 选择权。

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

PS。我知道，我可以重新安排元素，以便我可以将.fixed-content放在.items之外并为它指定一个位置：绝对属性，但让我们假装我无法做到这一点。 ;）

Answer 1

我不喜欢这个标记，它只是一个悬浮效果（不是carroussel），但我相信是这样的。

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%);
}

如何否定css

1 个答案: