Question

假设我有以下内容：

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 animation "progress" callback

我认为我们可以采用另一种方式来获得它，因为在cubic-bezier（0.39,0.575,0.565,1）行中我们有动画算法，所以应该有办法从那里获得任何值。

感谢。

获取动画的百分比值

0 个答案: