代码之家 › 专栏 › 技术社区 › Leo

在css上而不是javascript上启动animationend

animation css javascript

Leo · 技术社区 · 5 年前

我有点麻烦 animationend 我不明白。我仍然不明白发生了什么(也许我会在后面添加更多关于我实际看到的内容),但是我去了CodePen,借了一个例子,它在纯CSS和JavaScript中只使用 animate .

我修改的示例如下: https://codepen.io/lborgman/pen/QWwjwrE

代码中有趣的部分是:

var elements = document.querySelectorAll('.js li');
var animations = [];

for (var i = 0, len = elements.length; i < len; ++i) {
  var animation = elements[i].animate([
    { transform: 'rotate(0deg)', offset: 0 },
    { transform: 'rotate(-12deg)', offset: .08 },
    { transform: 'rotate(270deg)', offset: .3 },
    { transform: 'rotate(-40deg)', offset: .55 },
    { transform: 'rotate(70deg)', offset: .8 },
    { transform: 'rotate(-13deg)', offset: .92 },
    { transform: 'rotate(0deg)', offset: 1 }
  ], {
    duration: 3000,
    // iterations: Infinity,
    easing: 'linear',
    delay: 0
  });

动画很好,但我不明白 动画制作 事件。(我在CSS版本中得到这个事件。)

这里怎么了?

1 回复 | 直到 5 年前

Jaromanda X 5 年前

您可以使用 .onfinish 返回对象的属性 .animate

就像这样:

const liEnds = document.querySelectorAll('li');
for (let li of liEnds) {
  li.addEventListener("animationend", function (){
    this.style.background = "green";
  });
  li.addEventListener("animationstart", function (){
    this.style.background = "#55f";
  });

}

const ulEnds = document.querySelectorAll('ul');
for (let ul of ulEnds) {
  ul.addEventListener("animationend", function (){
    this.style.background = "#ff0";
  });
  ul.addEventListener("animationstart", function (){
    this.style.background = "#f00";
  });
}



const elements = document.querySelectorAll('.js li');
const animations = [];
elements.forEach(element => {
  var animation = element.animate([{
      transform: 'rotate(0deg)',
      offset: 0
    },
    {
      transform: 'rotate(-12deg)',
      offset: .08
    },
    {
      transform: 'rotate(270deg)',
      offset: .3
    },
    {
      transform: 'rotate(-40deg)',
      offset: .55
    },
    {
      transform: 'rotate(70deg)',
      offset: .8
    },
    {
      transform: 'rotate(-13deg)',
      offset: .92
    },
    {
      transform: 'rotate(0deg)',
      offset: 1
    }
  ], {
    duration: 3000,
    // iterations: Infinity,
    easing: 'linear',
    delay: 0
  });
  animation.onfinish = function() {
    element.style.background = 'green';
    element.parentElement.style.background = "#ff0";
  };
  element.style.background = "#55f";
  element.parentElement.style.background = "#f00";
  animations.push(animation);
});
document.querySelector('.css').classList.add('activated');
document.querySelector('.js').classList.add('activated');

body {
  background: #135569;
}

ul {
  display: inline-block;
  width: 6rem;
}

li {
  background: #dedfee;
  height: 4rem;
  width: 4rem;
  display: block;
  margin: 2rem 0 2rem 2rem;
  border-radius: 1rem;
}

.css li {
  background: #d05f5e;
  animation: translation 3s 0s 1 linear;
}

@keyframes translation {
  0% {
    transform: rotate(0deg)
  }
  8% {
    transform: rotate(-12deg)
  }
  30% {
    transform: rotate(270deg)
  }
  55% {
    transform: rotate(-40deg)
  }
  80% {
    transform: rotate(70deg)
  }
  92% {
    transform: rotate(-13deg)
  }
  100% {
    transform: rotate(0deg)
  }
}

ul {
  background-color: #e70;
}

a {
  position: absolute;
  bottom: 0;
  padding: 1rem;
  left: 0;
  right: 0;
  color: #fafbff;
  background: #fafbff20;
  font-family: system-ui, sans-serif;
}

<ul class="js">
  <li>js</li>
  <li>js</li>
</ul>
<ul class="css">
  <li>css</li>
  <li>css</li>
</ul>