I'm making a drop down menu with CSS & using CSS transitions to fade & move the menu into display. This is working fine by altering the top & opacity values but the problem is when the menu is hidden it is still over other elements on the page so they cannot be interacted with, even though the menu is not visible.
My solution to this problem is that use z-index to place the menu behind everything else when it's not visible but I cannot get it working with the transitions. When I use the code below the z-index changes as expected & the menu can be shown & hidden but it does not animate.
transition: top 0 .3s ease-in, opacity 0 .3s ease-in, z-index 0;
The code below here transitions fine but the z-index change happens before the transitions so you can end up with the z-index putting the menu behind other content then then transition happening where it cannot be seen.
transition: top 0 .3s ease-in, opacity 0 .3s ease-in;
I've worked out what my problem is now, I had the shorthand values in the wrong order & the 0s require the unit of measurement after, so it this case they should have been 0s.
Here's the working code applied to the non-hover state for the drop down, this takes affect when the menu is transitioning to its hidden state:
transition: top .3s ease-in 0s, .3s opacity ease-in 0s, 0s z-index ease-in .3s;
Here's the code applied to the hover state of the drop down which takes affect when the menu is transitioning to its visible state.
transition: top $default-animation-timing ease-in 0s, $default-animation-timing opacity ease-in 0s, 0s z-index ease-in 0s;
As a side note, but related to why I had this problem, when looking up documentation on MDN the "Initial value" list is written in alphabetical order, not in the order the values should be added. I assumed they were in the order they should be used which is why I had my value ordering wrong.
Related
I am trying to make a simple pure CSS slider for the FB page widget. The thing is that the code works for all of the major browsers exept MS Edge and IE.
.slider {
-webkit-transition: right 1s ease-in-out;
-moz-transition: right 1s ease-in-out;
-o-transition: right 1s ease-in-out;
transition: right 1s ease-in-out;
}
Everytime when I move the mouse cursor to the FB iframe the transition is cancelled. I tried to add the overlay and pointer-events as a iframe's parent but effect is the same.
Is this the MS Edge bug or I am doing something wrong?
I am giving working CodePen.
EDIT: I don't wanna use jQuery. As I mentioned before it has to be pure CSS animation.
I stumble upon this code around:
-webkit-transition: all 0.1s ease-in;
-moz-webkit-transition: all 0.1s ease-in;
what does this do? can someone please explain further, I don't understand samples on w3schools and MDN. I'd really appreciate
a transition describes how a css layout will "transition to another layout" to break it down
the first element
-webkit-transition: all 0.1s ease-in;
all describes which css properties to apply the transition effect to
The transition-property CSS property is used to specify the names of CSS properties to which a transition effect should be applied. mdn transition property
0.1s describes the duration
ease-in describes the type of transition
so -webkit-transition: all 0.1s ease-in;
this is saying for all css Properties i want a .01 second transition time using the ease-in transition mode
MDN
CSS3 Transitions are basically when the element in the DOM is moving.
For example it would rotate a rectangle div; it could enlarge or stretch the element.
I'm using CSS transitions on the ::after pseudo-element and it's working perfectly fine in Chrome and Firefox; however, it's not working as expected in Edge. The background color transition is working on the pseudo-element, but the width isn't.
Here's my current code: http://codepen.io/anon/pen/ZbYKwv?editors=110
For the purpose of being able to see the transition clearly, I increased the duration from 400 ms to 4000 ms. I also added a white background to the <label> because Edge doesn't seam to support a data URI SVG for a background image (I'm actually using a file, but I can't upload that to CodePen).
So what can I do to make the width of the pseudo-element animate as expected on Edge?
Try by adding the prefixes for all browsers at the transition rule:
-webkit-transition: all 4000ms ease;
-moz-transition: all 4000ms ease;
-ms-transition: all 4000ms ease;
-o-transition: all 4000ms ease;
transition: all 4000ms ease;
This should transition work on every browser.
Besides that, you can try to specify a width value for the nav when the #nav-toggle is checked, even if it is the same value given for .nav.
IE and FF often have issues with transitions with max-width/height.
I want to use different duration for each transition property. For example for width I want to have a transition with 0.3s and for height 0.6s.
Is it possible in CSS3 ?
Sure, you can list different transitions with a comma separated list: transition: color 0.25s ease, border 1s linear
transition: width 0.3s, height 0.6s;
Just use the shorthand transition property instead. Don't forget vendor prefixes.
Fiddle: http://jsfiddle.net/2dwgg/
Okay so what I'm trying to do should be pretty simple (I hope).
I am using a wordpress plugin for my menu and an extension to make it sticky. My menu isn't at the top already, it is below another container, so it becomes sticky when the menu container reaches the top of the browser screen (as it should).
I have a menu item that is hidden when the menu is "not sticky" and then it becomes visible when it is "sticky." Everything works perfectly, however now I want to add a fade in effect preferably only using CSS3 (for simplicity of integration). So the fade in effect should take place when the visibility become visible (see code below, but basically when the menu becomes sticky)
My custom class for the menu item is ".jrm-um-sticky-only"
Here is my code to achieve the appearing/disappearing menu item:
#megaMenu ul.megaMenu li.jrm-um-sticky-only{
display: block !important;
visibility: hidden !important;
opacity: 0 !important;
}
#megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky li.jrm-um-sticky-only{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
I tried adding:
-webkit-transition: visibility 0.2s linear, opacity 0.2s linear;
-moz-transition: visibility 0.2s linear, opacity 0.2s linear;
-o-transition: visibility 0.2s linear, opacity 0.2s linear;
to the last selector above (where the opacity is 1), but it didn't work. I also tried setting opacity to 0 along with the above transition code but no avail.
I'm a newbie so sorry if there are errors in my approach here. (not sure if I need the opacity at 0 if the visibility is hidden???)
Thanks!!!!
Maybe you should add your transition rules to the first block
(#megaMenu ul.megaMenu li.jrm-um-sticky-only)