Alex Rivera | Logout

Trying to do a CSS Transition on a class change

Asked 2013-04-23T18:32:29.720
65

Was wondering if there was a way to do a css transition when div is given a certain class. My best example is this site http://ideaware.co/

When you scroll down and the header becomes fixed, it does a background color change and has opacity. Really nice looking.

I am working on a template I have here http://www.niviholdings.com/collide/ and what I want to do is when the < nav > becomes fixed, I want the < ul > to slide over to the right.

Hopefully I am explaining this correctly.

css
Edit
Report

1 Answer

68

Was wondering if there was a way to do a css transition when div is given a certain class.

Sure you can...

document.querySelector('#header').addEventListener('click', function(e) {
    e.target.classList.toggle('transition');
})
#header {
    background: red;
    padding: 10px 0;
    position: relative;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    left:0;
}

#header.transition {
    background: green;
    left: 50px;
}
<div id="header">Click me to toggle class</div>

DEMO

answered 2013-04-23T18:46:10.193

Your Answer