How do I disable CSS transitions the first time?
My site menu changes to a non-canvas menu when the screen width is <768px. The menu can then be invoked with a button click and translate
via a CSS transition.
The problem is the browser is> 768px then changes to <768px. The menu navigates quickly instead of initially being off the canvas.
You can see an example here: http://codepen.io/anon/pen/RPoQzO (code below)
- Make the preview section very wide and you will see the white square fill the width
- Resize the narrow section and you will see it slide out. I don't want it - I just want it to disappear instantly.
- By clicking on the green area, you will see the desired transition effect. (This is of course a bastardized performance, but it serves as an example of the problem)
I want to solve this (if possible) with CSS only. I dont want to add a Javascript listener to resize. I would rather have the effect last than using Javascript.
Edit : here's the code:
<div id="menu">
This is the menu
</div>
And CSS
body{
background:green;
}
#menu{
background:white;
}
@media(max-width:768px){
#menu{
transform:translateX(-100%);
-webkit-transform:translateX(-100%);
transition:transform 0.3s;
-webkit-transition:-webkit-transform 0.3s;
}
#menu.in{
transform:translateX(0);
-webkit-transform:translateX(0);
}
}
source to share
You can try to achieve this with another helper class that would set up a transition:
#menu {
background:white;
}
@media (max-width: 768px) {
#menu {
transform:translateX(-100%);
-webkit-transform:translateX(-100%);
}
#menu.clicked {
transition: transform 0.3s;
-webkit-transition:-webkit-transform 0.3s;
}
#menu.in {
transform:translateX(0);
-webkit-transform:translateX(0);
}
}
and the JS part:
$(window).on('click',function() {
$("#menu").toggleClass('in').addClass('clicked');
setTimeout(function() {
$("#menu").removeClass('clicked');
}, 100);
});
Note that you need to remove the helper class after a short timeout so that the transition will only be active on click, not on window resize.
source to share
Moving transition:-webkit-transform 0.3s; transition:transform 0.3s;
from within a media query to a standard query #menu
seems to work, as shown:
From this:
#menu{
background:white;
}
@media(max-width:768px){
#menu{
transform:translateX(-100%);
-webkit-transform:translateX(-100%);
transition:transform 0.3s;
-webkit-transition:-webkit-transform 0.3s;
}
#menu.in{
transform:translateX(0);
-webkit-transform:translateX(0);
}
}
For this:
#menu{
background:white;
transition:transform 0.3s;
-webkit-transition:-webkit-transform 0.3s;
}
@media(max-width:768px){
#menu{
transform:translateX(-100%);
-webkit-transform:translateX(-100%);
}
#menu.in{
transform:translateX(0);
-webkit-transform:translateX(0);
}
}
This is because the transition property does not apply when the screen is wider than 768 pixels; so it will jump suddenly instead of smoothly changing.
source to share
Now that I understand the question more clearly, you can try this:
<style>
body{
background:green;
}
#menu{
background:white;
transform:translateX(-100%);
-webkit-transform:translateX(-100%);
}
.out{
transform:translateX(0%)!important;
-webkit- transform:translateX(-0%)!important;
}
@media(max-width:768px)
{
#menu{
transition:transform 0.3s;
-webkit-transition:-webkit-transform 0.3s;
}
}
@media(min-width:786px)
{
#menu{
transform:translateX(0%);
-webkit- transform:translateX(-0%);
}
}
</style>
<body onclick=" if(window.outerWidth < 786){document.querySelector('#menu') .classList.toggle('out');}">
<div id="menu">
This is the menu
</div>
</body>
This method does not use event listeners or enforce it inside the frame (where the outer width is not the width), it looks like it works.
source to share