Javascript 事件监听器问题

Question

Chrome 开发者工具中的控制台没有显示任何错误，div 已加载，但动画播放状态保持暂停 - 我做错了什么？

document.getElementById("design").addEventListener("webkitAnimationEnd", animation);

function animation(){
    "use strict";
    document.getElementById("profile").classList.add("animation");
    location.href = "#profile";
}

CSS

#design {
position: relative;
-webkit-animation: mixdesign;
-webkit-animation-play-state: running;
-webkit-animation-duration: 30s;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
z-index: 8;
}


/* Profile */

#profile {
position: relative;
-webkit-animation: profile;
-webkit-animation-duration: 30s;
-webkit-animation-play-state: paused;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}

.animation { -webkit-animation-play-state: running; }

Answer 1

As you were assigning class once transition ends, the existing class css property that takes priority over.

You can make it override them using the !important keyword.

Fiddle here

document.getElementById("design").addEventListener("webkitAnimationEnd", animation);

function animation() {
  "use strict";
  document.getElementById("profile").classList.add("animation");
}

#design {
  position: relative;
  -webkit-animation: design;
  -webkit-animation-play-state: running;
  -webkit-animation-duration: 3s;
  -webkit-transition-timing-function: all ease-in-out;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  z-index: 8;
}
/* Profile */

#profile {
  position: relative;
  -webkit-animation: profile;
  -webkit-animation-duration: 3s;
  -webkit-animation-play-state: paused;
  -webkit-transition-timing-function: all ease-in-out;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
}
.animation {
  -webkit-animation-play-state: running!important;
}
@-webkit-keyframes design {
  10%, 90% {
    -webkit-opacity: 1;
  }
  0%,
  100% {
    -webkit-opacity: 0;
  }
}
/*  Profile: (Animation) */

@-webkit-keyframes profile {
  10%, 90% {
    -webkit-opacity: 1;
  }
  0%,
  100% {
    -webkit-opacity: 0;
  }
}

<div id="design">Design</div>
<div id="profile">profile</div>