DuzAwe DuzAwe - 6 months ago 15
Javascript Question

Why aren't css transitions firing on toggle class

<div class="wrapper">
<div class="top">
<a class="btn" href="#" id="split-me">Click Me!</a>
</div>
</div>

<div class="hidden">
<h2>I like Nachos!</h2>
</div>

<div class="wrapper">
<div class="bottom"></div>
</div>

html {
overflow-y: scroll;
}

html,body {
height: 100%;
}

.top {
background-image: url(data:image/png;base64,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);
background-color: #3498db;
height: 100%;
position: absolute;
width: 100%;
box-shadow: 0 0 12px rgba(0,0,0,.50);
transition: 25s top ease-in;
}

.bottom {
background-color: #ecf0f1;
height: 100%;
position: absolute;
width: 100%;
box-shadow: 0 0 10px rgba(0,0,0,.45);
transition: .25s top ease-in;
}

.wrapper {
position: relative;
height: 50%;
min-height: 200px;
}

.slide-up {
top: -50%;
transition: .25s all ease-in;
}

.slide-down {
top: 50%;
transition: .25s all ease-in;
}

.hidden {
position: absolute;
height: 50%;
width: 100%;
z-index: -5;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

.hidden h2 {
height: 20px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
font-weight: 700;
font-family: 'Open Sans', serif;
color: #3498db;
}

.btn {
margin: auto;
position: absolute;
top: 100%;
left: 0;
bottom: 0;
right: 0;
background: #FFF;
height: 85px;
width: 145px;
padding-top: 60px;
border-radius: 100%;
text-align: center;
font-weight: 700;
font-family: 'Open Sans', serif;
text-decoration: none;
color: #3498db;
z-index: 100;
transition: .25s all;
box-shadow: 0 0 0 5px #3498db,0px 0 0 10px white,0px 0 10px 0 rgba(0,0,0,.5),0px 0 10px 10px rgba(0,0,0,.25);
transition: .25s all ease-in;
}

.btn:hover {
box-shadow: 0 0 0 10px #3498db,0px 0 0 20px white,0px 0 15px 0 rgba(0,0,0,.5),0px 0 10px 20px rgba(0,0,0,.25);
transition: .25s all ease-in;
}



$('#split-me').click(function(){
$('.top').toggleClass('slide-up');
$('.bottom').toggleClass('slide-down');
});


Code: http://codepen.io/DuzAwe/pen/RazYYW

On click, the tags are toggled to reveal the hidden area creating a split effect. But the transitions on the classes are providing no easing?

Am I using them wrong?

Answer

You are animating the top property, but in the .top class there is no top, property, so there is no animation, same for the .bottom class.

Check it here: http://codepen.io/tomsarduy/pen/MyMqdq

Comments