CODEWITHSUNDEEP
javascriptcss
AMDG
AMDG

Reputation: 975

CSS animation doesn't trigger after onclick event

I have css blocks that must go away from the page when they gain the .gone class.

I register a click event in Javascript, in the event handler I add the .gone class to the clicked element.

The bullet should go away to the left, or to the right, but it just disappears.

Here is the HTML code:

<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>

The javascript code:

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]);
}

The CSS code:

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;
}

See jsfiddle for live demo : http://jsfiddle.net/8u9j6n6x/

Thanks for your help

Upvotes: 0

Views: 143

Answers (1)

sareed
sareed

Reputation: 780

You need to add the transition to the .gone class not the #bullets div

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

updated fiddle http://jsfiddle.net/8u9j6n6x/1/

Upvotes: 1

Related Questions