jquery - CSS3 动画从上一个位置继续

Question

我的 CSS3 动画将元素 x 位置从 0% 移动到 100%，从 100% 移动到 200%，但是当它从 100% 移动到 200% 时，它不会从 100% 移动，而是从 0% 移动到 200% .

@keyframes moveZero {
  0%{
    transform: translate(0%, 0px);
  }
  100%{
    transform: translate(0%, 0px);
  }
}

@keyframes moveOne {
  0%{
    transform: translate(0%, 0px);
  }
  100%{
    transform: translate(100%, 0px);
  }
}

@keyframes moveTwo {
  0%{
    transform: translate(0%, 0px);
  }
  100%{
    transform: translate(200%, 0px);
  }
}

请查看我的jsfiddle for full working example

Answer 1

仅 CSS

这是一个纯 CSS 解决方案:

(标记已从您的案例中简化以提供更简单的示例)

http://jsbin.com/kimibojedi/

HTML

<nav>
  <input type="radio" name="radios" id="one"/>
  <label for="one" class="nav__button">Button One</label>
  <input type="radio" name="radios" id="two"/>
  <label for="two" class="nav__button">Button Two</label>
  <input type="radio" name="radios" id="three"/>
  <label for="three" class="nav__button">Button Three</label>
  <div class="nav__bottom"></div>
</nav>

CSS

nav {
  position: relative;
  width: 450px;
  display: flex;
  justify-content: space-between;
  background-color: white;
}

.nav__button {
  padding: 20px 0;
  width: 150px;
  text-align: center;
  transition: .3s;
}

.nav__bottom {
  position: absolute;
  bottom: 0;
  width: 150px;
  height: 5px;
  background-color: rgb(240, 20, 40);
  bottom: 0;
  transition: .3s;
}

input[type="radio"] { display: none }

input[type="radio"]:checked + label { background-color: pink; }

input[type="radio"]:nth-of-type(1):checked ~ .nav__bottom{
  left: 0;  
}

input[type="radio"]:nth-of-type(2):checked ~ .nav__bottom{
  left: 150px;  
}

input[type="radio"]:nth-of-type(3):checked ~ .nav__bottom{
  left: 300px;  
}

您可以使用标签来选择隐藏的单选元素，并将 :checked 伪选择器与 ~ 兄弟选择器结合使用。

Javascript 建议

否则，关于您在下面发布的解决方案的一些建议:

使用 33%、66% 等，不会像您需要的那样精确(例如，33% 宽度在 66% 左侧会给你留下 1% 的差距)。我更喜欢设置数学并让浏览器对像素进行精细处理:

left: (100 / 3) + '%' // 33.3333...%

我还发现尽可能多地处理 CSS 中的过渡效果要容易得多。这就是布局的所有逻辑所在，所以我更愿意将它与 javascript 分开。但是，我们经常需要 javascript 来进行影响布局的更改。我喜欢通过在 Javascript 中添加类并让 CSS 从那里接管来做到这一点。例如:

// JS
$('button').click(function() {
   $('.nav__bar').addClass('active');
})

// CSS
.nav__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0px;
  height: 5px;
  background: red;
  transition: .5s;
}

.nav__bar.active {
  width: 100%; 
}

我在这里使用这种方法对您的 JSFiddle 进行了 fork :https://jsfiddle.net/hp681kbu/