javascript - 动画无法第二次执行

Question

我有一个动画，当我点击它时会触发它。问题是我无法在第一次执行后第二次触发它。Javascript 中的延迟似乎不起作用，无论您输入什么值，动画都保持不变。通常所有这些代码都是在访问外部链接之前设置延迟。

（点击图片触发动画）https://jsfiddle.net/jinzagon/e359t6fr/6/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://example.com" class="section"><div class="response"><img style="width:100%;"src="https://images.hdqwalls.com/wallpapers/huntdown-4k-ky.jpg"></div></a>

JS

$(document).ready(function() {
  $('.section').click(function(e) {
    e.preventDefault();
    var $a = $(this).addClass('clicked');
    setTimeout(function() {
      window.location.assign($a.attr('href'));
    }, 1700);
  });
});

CSS

a {
  overflow: hidden;
}
.section {
  background-color: black;
  position: absolute;
width: 100%;
    height: 100%;
    left: 0;
    top: 0;
      transition: 2s ease-out;
}
.response {
  position: relative;
  top: 0px;
  left: 00px;
  width: 100%;
  height: 100%;
  transition: 4s ease-out;
  opacity: 1;
}
.clicked {
  animation-delay: 2s;
  animation: event 2s;
}
.clicked > .response {
  
  animation: response 4s;
}
@keyframes event {
  0% {
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
  }
  20% {
    box-shadow: 0px 9px 14px 0px rgba(50, 50, 50, 0.6);
  }
  100% {
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
  }
}
@keyframes response {
  0% {} 16% {
    opacity: 1;
  }
  32% {
    opacity: 0;
  }
  40% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
  }
}

标签： javascripthtmljquerycss