0

I have a nav menu that has a transitions CSS:

nav {
    height: 700px;
    width: 100%;
    background-color: rgb(158, 165, 177);
    position: relative;
    margin-top: -622px;
    -webkit-transition: margin .4s cubic-bezier(1,-0.29,.76,1.32);
       -moz-transition: margin .4s cubic-bezier(1,-0.29,.76,1.32);
        -ms-transition: margin .4s cubic-bezier(1,-0.29,.76,1.32);
         -o-transition: margin .4s cubic-bezier(1,-0.29,.76,1.32);
            transition: margin .4s cubic-bezier(1,-0.29,.76,1.32);

}

.show-nav {
    margin-top: -100px;
}

i use this jQuery to trigger it:

$('nav').click(function(e) {
    e.preventDefault();
    $(this).toggleClass('show-nav');
});

The problem is that every time the page loads I see the margin transition as if it had the show-nav class and then removed.

Why is that?

ilyo
  • 35,851
  • 46
  • 106
  • 159
  • 1
    The transition occurs on the selector match, not when it's removed. – Jared Farrish Sep 30 '12 at 13:49
  • Take a look at this (fairly extensive) answer with demonstrations: http://stackoverflow.com/a/12489271/451969 – Jared Farrish Sep 30 '12 at 13:51
  • @Jared Farrish I'm not sure what that means regarding my question – ilyo Sep 30 '12 at 18:14
  • 1
    Because there's transitions in, out and layered both directions. It's all about the way you *add* classes to the elements. Correlate the jQuery and the class names, primarily the `#block .blocks.transition` and `.blocks.transition.show`. Even the layered `#block.transition.show` being defined twice and having two different effects. You may "want" it to do something with the class structure you have already, but be aware of how the class structure can be used to your advantage. – Jared Farrish Sep 30 '12 at 18:29

1 Answers1

0

Why don't you put the transitions in the .show-nav declaration in css?

erik
  • 180
  • 2
  • Because I want it to happen when adding and when removing this class – ilyo Sep 30 '12 at 15:30
  • 1
    @IlyaD - If you want them to react like that, then make another class for your transitions (something maybe `.transition`) and then add/remove that class name as necessary. I wouldn't leave it on the element at page load on an element selector like `nav` though. – Jared Farrish Sep 30 '12 at 18:32