javascript - CSS 动画在 onclick 事件后不触发

Question

我有一些 css block ，当它们获得 .gone 类时必须离开页面。

我在 Javascript 中注册了一个点击事件，在事件处理程序中我将 .gone 类添加到被点击的元素。

子弹应该向左或向右飞去，但它只是消失了。

这是 HTML 代码:

<div id="firstPage">
    <div id="bullets">
        <div data-href="#projects"    class="top left">Projects</div>
        <div data-href="#skills"      class="top right">Skills</div>
        <div data-href="#experiences" class="bottom left">Experiences</div>
        <div data-href="#contact"     class="bottom right">Contact</div>
    </div>
</div>

JavaScript 代码:

var bullets = [];

function openPage(e) {
    e.preventDefault();
    this.classList.add('gone');
}

var tmpBullets = document.querySelectorAll('#bullets div');
for(var i = 0 ; i < tmpBullets.length ; i++) {
    tmpBullets[i].addEventListener('click', openPage, true);
    bullets.push(tmpBullets[i]);
}

CSS代码:

html {
    font-family: QuattrocentoSans;
    overflow: hidden;
}

#firstPage {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/noise.png');
}

#firstPage h1 {
    display: block;
    margin: auto;
    text-align: center;
    margin-top: 100px;
    font-family: Pacifico;
    font-size: 50px;
    color: #fff;
    text-shadow: 0 0 3px #000;
}

#bullets {
    display: block;
    width: 320px;
    margin: auto;
}

#bullets div {
    position: absolute;
    display: inline-block;
    width: 150px;
    height: 150px;
    line-height: 150px;
    border-radius: 50%;
    background-color: #333;
    text-align: center;
    color: white;
    text-decoration: none;
    margin-top: 10px;
    margin-right: 5px;
    margin-left: 5px;
    text-shadow: 0 0 3px #999;
    font-size: 1.2rem;
    transition: box-shadow 500ms, left 1000ms, right 1000ms;
}

#bullets div.top {
    top: 100px;
}

#bullets div.bottom {
    top: 270px;
}

#bullets div.left {
    left: calc(50% - 165px);
}

#bullets div.right {
    right: calc(50% - 165px);
}

#bullets div:hover {
    box-shadow: 0 0 10px #555;
    transition: box-shadow 500ms;
}

#bullets div.left.gone {
    left: -160px;
}

#bullets div.right.gone {
    right: -160px;
}

请参阅 jsfiddle 进行现场演示:http://jsfiddle.net/8u9j6n6x/

谢谢你的帮助

Answer 1

您需要将过渡添加到 .gone 类而不是#bullets div

#bullets div.gone {
    transition: box-shadow 500ms, left 1000ms, right 1000ms;
}

更新 fiddle http://jsfiddle.net/8u9j6n6x/1/