How to Prevent a Responsive Nav Menu (Powered by a CSS3 Transition) from Animating When Different Media Queries Take Effect

How can I prevent a responsive nav menu (powered by a CSS3 transition) from animating when different media queries take effect?

Nice job, very clean. Can i steal it? :-)

Anyway, here's your solution with a demo.

I just moved the transition to another class:

.nav {
    /* stuff */
    z-index: 1;
    transform: translate3d(0,-100%,0);
    -webkit-transform: translate3d(0,-100%,0);
}
.nav.active {
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
.nav.activated {
    transition: transform 400ms linear;
    -webkit-transition: -webkit-transform 400ms linear;
}

Which you can add to the element at first "Toggle":

function toggle(){
    $(".nav").addClass("activated").toggleClass("active");
}

---

P.S. If you don't want the transition to happen even after the user has opened the menu and then resized the window again, you could use Modernizr's mq method:

$(window).on('resize',function(){
    if(Modernizr.mq('(min-width:600px)')) $(".nav").removeClass("activated");
});

Why do my hover effects stop working when my media queries kick in

So without a media-query you've set the <li> elements to display: inline-block; Right now your li:hover{transform: scale(1.08);} works fine.

But then in one of your media-queries you set the <li>elements to display: inline;. Not really sure why tough, guess what you want will work with inline-block as well and this breaks the scaling right now. You're hover problem would be fixed if youjust removed the display:inline; line in youre media-query .

Responsive menu hidden by main content

Try this code, should work for overlapping.

.nav-list-pagina {
    z-index: 2;
    position: relative;
}

Angular 4 component responsive animations

There is no way to define JavaScript behavior based on CSS @Media queries. You will have to do what I did, where I created an Angular appearance service that monitors viewport dimensions and sends commands to components based on what is detected. You can then control animations and appearance with JavaScript logic instead of CSS logic.

Adding an example:

Create a service that monitors viewport width. If the viewport is less than, say, 500px, the service outputs "mobile," else, it outputs "desktop."

In your component, declare one trigger, we'll call it @slide, with multiple states. We will also set a private variable called stateOfYourChoosing, and you can set it to a string.

Then, in your template

<div [@slide]="stateOfYourChoosing"></div>

You can then choose which state you want the default state of stateOfYourChoosing to be, and how you want your component to transition based on component logic.

So, if your appearance service outputs "desktop," your default stateOfYourChoosing would be "slideOut."

transition('slideOut => slideIn', animate('100ms ease-in'))

If the appearance service outputs "mobile," it sets stateOfYourChoosing to "mobileSlideOut," and your transition code is instead

transition('mobileSlideOut => mobileSlideIn', animate('100ms ease-in'))

You can then control all of your responsive animations in your animations module by controlling in what state your trigger is.

---

Related Topics