Question

我不知道我在这里做错了什么。我的动画工作得很好直到最后几天。调试之后，我看到动画端事件没有被链接到我最后两个动画中。

<div class="welcome-container"><div class="welcome-logo"><img src="https://placehold.it/250x250" class="welcome-avatar"></div><div class="welcome-title-container"><span class="welcome-title">Welcome, </span><span class="welcome-user">User!</span></div></div>

$(function() {
    var container = $('.welcome-container');
var logo = document.querySelector('.welcome-logo');

logo.addEventListener('animationend', function(e) {
    console.log(e.animationName);
}, false);;

setTimeout(function() {
    container.addClass('visible');      
  }, 1000)
});

html, body {
  height: 100%;
  width: 100%;
}

.welcome-container {
  opacity: 0;
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;

  &.visible {
    transition-property: opacity;
    transition-duration: 450ms;
    opacity: 1;
    display: block;
    z-index: 1;
  }
}

.welcome-logo, .welcome-title-container {
  position: relative;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

.welcome-logo {
  overflow: hidden;
  border-radius: 50%;
  border: 16px solid #434c53;
  background-color: #ffffff;
  transform-origin: center center;
  width: 126px;
  height: 126px;
  transform: translate3d(-50%, 0, 0) scale(0.17);
  top: 8.4%;
}

.welcome-avatar {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
}

.welcome-user {
  opacity: 0;
  color: #434c53;
}

.welcome-title {
  opacity: 0;
  color: #6D7579;
}

.welcome-title-container {
  position: absolute;
  font-size: 15px;
  top: 63.3%;
}

.welcome-container.visible {
  .welcome-logo {
    animation-fill-mode: forwards;
    animation-duration: .6s, .2s, .3s, .1s, .1s, .3s;
    animation-name: logoMoveDown, logoSmall1, logoBig1, logoNormal, logoBig2, logoFadeOut;
    animation-delay: 0s, 0.1s, 0.3s, 0.6s, 3.1s, 3.2s;
  }

  .welcome-avatar {
    animation-fill-mode: forwards;
    animation-duration: .2s;
    animation-name: fade-in;
    animation-delay: 0.3s;
  }

  .welcome-user {
    animation-fill-mode: forwards;
    animation-duration: 1s, .3s;
    animation-name: fade-in, fade-out;
    animation-delay: 1s, 3.2s;
  }

  .welcome-title {
    animation-fill-mode: forwards;
    animation-duration: 1s, .3s;
    animation-name: fade-in, fade-out;
    animation-delay: 0.8s, 3.2s;
  }
}

@keyframes logoMoveDown {
  from{
    top: 8.4%;
  }
  to {
    top: 39%;
  }
}

@keyframes logoSmall1 {
  from {
    transform: translate3d(-50%, 0, 0) scale(0.17);
  }
  to {
    transform: translate3d(-50%, 0, 0) scale(0.1);
  }
}

@keyframes logoBig1 {
  0% {
    transform: translate3d(-50%, 0, 0) scale(0.1);
    border-width: 16px;
  }
  50% {
    border-width: 3px;
  }
  100% {
    transform: translate3d(-50%, 0, 0) scale(1.2);
    border-width: 3px;
  }
}

@keyframes logoNormal {
  from {
    transform: translate3d(-50%, 0, 0) scale(1.2);
  }
  to {
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}

@keyframes logoBig2 {
  from {
    transform: translate3d(-50%, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-50%, 0, 0) scale(1.2);
  }
}

@keyframes logoFadeOut {
  0% {
    transform: translate3d(-50%, 0, 0) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate3d(-50%, 0, 0) scale(0.2);
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

Chrome工作正常。 Safari（9.1.2）无法正常工作！另一个有趣的问题我发现：使用alt + tab并在动画中返回将被调用以结束aslong没有iframe使用。所以你不能在小提琴演示中看到。

Safari并不总是使用链式动画来触发animationend

0 个答案: