如何否定css中的运动

Posted 2023-03-07

【中文标题】如何否定css中的运动

【英文标题】：How to negate a movement in css

【发布时间】：2016-10-25 10:00:57

【问题描述】：

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

例如，我有一个带有以下标记的轮播：

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

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

如果它有这些类，它将对 .item 元素应用 css 变换： translateX(-100%) [或变换： translateX(100%)]，它的过渡持续时间为 0.6 秒，缓动退出选项。

现在，我想对 .fixed-content 使用 css 动画，使其看起来“静态”或“固定”。我如何在动画关键帧中写出来？如果转换持续时间发生了变化，使用什么公式来计算？

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

【问题讨论】：

试试position: fixed！

为了争论，假设 position:fixed 不是一个选项，因为它的本质存在一个问题：即使向下滚动，它也会保持固定位置。

【参考方案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%);

【讨论】：

谢谢。但我认为 div.fixed-content 应该在 2 li.item 内。

为什么。不应该一样吗？你想改变字符串吗？

“我想留在原地，我的内容与上面的固定元素完全相同”

因为 li.item 内的内容是通过 CMS 控制的，不允许用户将元素放在 li.item 之外。 （这很复杂，但此时我们无法更改系统）

所以，它的内容不一样。 :p