Question

我有一个css过渡，我需要在某个时刻让它更快。但是添加课程的通常行为并不起作用。我的问题是它为什么没有，以及如何实现它。

HTML：

<a href="#" onclick="$('div').addClass('move')">move</a> |
<a href="#" onclick="$('div').addClass('faster')">faster</a>
<div></div>

CSS：

div {
  width: 100px;
  height: 100px;
  background-color: green;
  transition: all 10s;
}

.move {
  margin-left: 500px;
}

.faster {
  transition: all 1s !important;
}

Codepen： https://codepen.io/anon/pen/EQxaxX

Answer 1

这是一个类似的问题，我们必须处理类似的情况，但它是关于减慢动画How to slow down CSS animation on hovering element without jumps?

这个想法是依靠容器的运动来创造这种加速度。因此，要使动画快速移动容器的方向相同，但不要忘记移动容器也会移动初始元素的最终目的地，因此您还需要更改它。

以下是一个例子：

$('.start').click(function() {
  $('.element').addClass('move');
})


$('.fast').click(function() {
  $('.container').addClass('faster');
})

.container {
  transition: all 5s linear;
}

.element {
  margin-top: 10px;
  width: 100px;
  height: 100px;
  background-color: green;
  transition: all 10s linear;
}

.move {
  margin-left: 500px;
}

.faster {
  margin-left: 300px;
}

.faster .move {
  margin-left: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="start">move</a> | <a href="#" class="fast">faster</a>
<div class="container">
  <div class="element"> </div>
</div>
<div class="element"> </div>

这个解决方案看起来很简单，因为它只依赖于一些CSS，但它有一些缺点。正如您最后可能注意到的那样，转换变得缓慢，这是因为容器的动画结束，因此元素的速度恢复到初始值。此行为将根据点击的时刻而有所不同。

因此，您可以调整值以使此效果可以忽略不计，或者您可以考虑使用更复杂的jQuery代码来提高速度。

以下是一个例子：

$('.start').click(function() {
  $('.element').addClass('move');
})


$('.fast').click(function() {
  $('.element').css('margin-left','10000px'); // we make a big value to increase speed
  setTimeout(function(){check_limit()},20);
  
})

// we test the limit and we avoid margin to go to the big value
function check_limit() {
   if(parseInt($('.element').css('margin-left')) >=500) {
      $('.element').css('margin-left','500px');
   } else {
      setTimeout(function(){check_limit()},20);
   }
}

.container {
  transition: all 5s linear;
}

.element {
  margin-top:10px;
  width: 100px;
  height: 100px;
  background-color: green;
  transition: all 10s linear;
}

.move {
  margin-left: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="start">move</a> | <a href="#" class="fast">faster</a>
<div class="element"> </div>

如何在运行中提高css转换速度

1 个答案: