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)
Related
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.
I am trying to emulate the hover link effect for the menu as seen on this page:
https://www.paifma.com/
The code i am using on my page is:
http://beta.greekconcierge.com/login/
.x-navbar .desktop .x-nav>li {
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
but it doesn't seem to work.
1 - You have to set the initial property value and the final property value to make a transition work
2 - left and right are position properties, in order to achieve that effect I would make and additional div
height 1
width 0
disp. inline-block
center aligned
and on hover you make that div width 100% (using transitions as well)
If I have a series of divs all with float: left and I resize the browser so they wrap, can I animate their transition to their new location using only CSS animations (no JavaScript)?
Without using JavaScript that's most likely a no...
CSS transitions and animations rely on the elements' CSS properties changing. The line wrap behavior you're seeing when the window is resized doesn't change the elements' properties, so you won't have anywhere to add a transition.
Even with JavaScript I doubt creating the effect you're after would be trivial, you may want to check out a plugin like Masonry
You can try use transistions, but I think that in your example it's not possible without JS.
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
So I'm having an issue with the default modal animation.
I know how to customise the speed of the animation for the fade in animation with the modal window, but there is an issue.
There is a delay between when the .modal-backdrop div fades in, and when the actual .modal div fades in. I realise that this delay is in their originally to account for time for the modal body to slide down from the top.
I have removed the top slide down animation, and just want a simple, quick fade in.
I can't seem to remove this delay, no matter what sort of hackyness I apply to the .modal.fade / .modal.fade.in classes.
Where on does this delay come from in Bootstrap?
If you just remove the slide transition, all else seems to work fine.
http://jsfiddle.net/isherwood/vvsnB/
.modal.fade {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
I have a problem with the CSS transition property.
I need to declare two transitions for a section-tag. Every transition with the section should have a duration of 1s, only the background should have a duration of 0.3s
So my CSS-transition code would look like that:
section{
background: black;
transition: all 1s ease, background 0.3s ease;
}
section:hover{
background: green;
transform: translateY(100px);
}
But when I hovering the link now, the background get animated in 1s and it blinks strangely.
Here the codepen Demo
Someone know why this happend? And how can I realize my goal?
And yes, I need the all property!
EDIT
Just found a strange one. In the linked codepen above, it blinks. But when I animate also the padding, it stop blinking! But the background will be animated in 1s...
Here's the second demo
I have tried this in code pen, the problem not in the transition property.
Better you use div tag for the link background and create separate transition for that.
Surely div tag will give the best solution for your problem.
The problem occurred because as you hover over the element, it starts moving downwards.
When the element is not hovered, it would revert back.
Now as you hover, the elements starts moving and then loses the hover immediately which causes it to return to original state but again gains the hover effect as it again receives the mouse-over event which also cause blink, and the strange phenomenon you observed.
If you place mouse close towards the bottom, you observe the desired effect.
The fix should be that you write a hover for the container that contains these elements and apply the effect to these elements.
Besides you've applied transition in only 1 state which also may be the reason for blink;
try using transitions to both the statements like below:
section{
width:300px;
height:300px;
background:black;
color:white;
transition: background 0.3s ease, all 3s ease;
}
section:hover{
background:green;
transition: background 0.3s ease, all 3s ease;
}