2

假设我有以下内容：

CSS

.animatedItem {
    background-color: red;
    width: 200px;
    height: 200px;
    transition: all 1200ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
.animatedItemSate1 {
    margin-left: 0px;
}
.animatedItemState2 {
    margin-left: 200px;
}

jQuery

$('.animatedItem.animatedItemSate1')
     .removeClass('animatedItemSate1')
     .addClass('animatedItemState2');

// get X percent of animation
var percent = 30; // 30% of animation
var animationValue = '?'; // animation value at 30%
alert(animationValue);

HTML

<div class="animatedItem animatedItemSate1"><div>


$('.animatedItem.animatedItemSate1')
  .removeClass('animatedItemSate1')
  .addClass('animatedItemState2');

// get X percent of animation
var percent = 30; // 30% of animation
var animationValue = '?'; // animation value at 30%
console.log(animationValue);
.animatedItem {
  background-color: red;
  width: 200px;
  height: 200px;
  transition: all 1200ms cubic-bezier(0.39, 0.575, 0.565, 1);
}

.animatedItemSate1 {
  margin-left: 0px;
}

.animatedItemState2 {
  margin-left: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animatedItem animatedItemSate1">
  <div>

它运行不是线性的 css3 动画。在动画运行之前，我需要获得 30%（或任何其他）的动画值。如何得到它？我创建了一个小提琴：https ://jsfiddle.net/syom777/xnpfzyoL/8/

更新：这里有类似的讨论：CSS3动画“进度”回调

我认为我们可以应用另一种方式来获得它，因为在三次贝塞尔曲线（0.39, 0.575, 0.565, 1) 行中我们有动画算法，所以应该有一种方法可以从那里获得任何值。

谢谢。

4

0 回答 0