Menu
Was wondering if there was a way to do a css transition when div is given a certain class. My best example is this site http://ideaware.co/
When you scroll down and the header becomes fixed, it does a background color change and has opacity. Really nice looking.
I am working on a template I have here http://www.niviholdings.com/collide/ and what I want to do is when the < nav > becomes fixed, I want the < ul > to slide over to the right.
Hopefully I am explaining this correctly.
640
Triggering transitions You can trigger CSS transitions directly with pseudo classes like :hover (activates when the mouse goes over an element), :focus (activates when a user tabs onto an element, or when a user clicks into an input element), or :active (activates when user clicks on the element).
A transition occurs when a CSS property changes from one value to another value over a period of time. The transition property is a shorthand of four CSS properties, transition-property , transition-duration , transition-timing-function , transition-delay .
The transition-timing-function property can have the following values: ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default) linear - specifies a transition effect with the same speed from start to end. ease-in - specifies a transition effect with a slow start.
So, what's the difference between CSS Transform and CSS Transition? The Transform property in CSS moves or modifies the appearance of an element, whereas the Transition property seamlessly and gently transitions the element from one state to another.
Was wondering if there was a way to do a css transition when div is given a certain class.
Sure you can...
document.querySelector('#header').addEventListener('click', function(e) { e.target.classList.toggle('transition'); })#header { background: red; padding: 10px 0; position: relative; -webkit-transition: all 1s linear; -moz-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear; left:0; } #header.transition { background: green; left: 50px; }<div id="header">Click me to toggle class</div>DEMO
60
2 points i found that may help:
Transitions from auto to a fixed value might be a problem. Eventually you could try setting the margin-left of the .main-nav-ul to a fixed value per default, not only when it's sticky.
The second is (and this is hacky). Try to apply the class for your .main-nav-ul delayed:
setTimeout(function() { $('.main-nav-ul').addClass('nav-slide'); // line 57 in jquery.sticky.js }, 100); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
