hamburger menu icon transition issue scss - html

I am having some trouble with the transition property trying to include the all keyword.
I've included a fiddle and I feel I'm either making a simple (or stupid) mistake or something? I've seen the all keyword work fine? And it seems to working fine on the .on class when selecting them?
Why is the base classes that use the
// not working
transition: 0.2s transform, 0.2s all 0.4s;
// working
transition: 0.2s transform, 0.2s top 0.4s, 0.2s margin-top 0.4s;
https://jsfiddle.net/us2196np/2/

I think it's about priority
look
transition: 0.2s all 0.4s, transform 0.2s ;
i mean fisrt it sets transition to all styles then it rewrites transform

Related

CSS Transition not working with ng-class

I'm attempting to create a CSS transition when an element receives a certain class. So far the toggle change works (which means that ng-class is working properly), but the animation doesn't happen.
Here's my code:
.intro-text{
height:auto;
-webkit-transition: height 200ms ease-out;
-moz-transition: height 200ms ease-out;
-o-transition: height 200ms ease-out;
transition: height 200ms ease-out;
}
.intro-text.hide{
height:0;
}
And the HTML:
<div class="intro-text" ng-class="{'hide':clicked}">
<h1>Howdy stranger!</h1>
<h3>Use the form below to search for an artist and start building your record collection!</h3>
</div>
What am I missing?
EDIT: I've narrowed the problem down to bootstrap. If I include the bootstrap.min.css, the animation doesn't work, without it, it works perfectly. Any idea why guys?
EDIT 2: Fixed it! The problem is that both .hide and .hidden are classes defined in Bootstrap, so it was overriding my styles, parsing a display:none; before the animation was visible. When changed the class to another name, it got fixed : )
Actually your issue is not about Angular + ng-class, but about a css3 transition between height: auto and height: 0.
Here is a SO question about this: http://jsfiddle.net/Y3uxy/
The solution is to do the transition on max-height instead of height, and to set max-height to something big enough.
.intro-text{
max-height:999px;
overflow: hidden;
-webkit-transition: max-height 200ms ease-out;
-moz-transition: max-height 200ms ease-out;
-o-transition: max-height 200ms ease-out;
transition: max-height 200ms ease-out;
}
.intro-text.hide{
max-height:0;
}
Here is a demonstration: http://jsfiddle.net/Y3uxy/

Show/hide div with link same link should also work for the tab content

The title may seem little bit confusing so I draw a sketch, so you can understand more what I want to achieve: https://www.dropbox.com/s/luoiz4erg4jfk8y/howitshouldwork.png
The tab function is based on liquidslider
I've start on the transition part, but I need some help...
CSS:
li a:onClick + .bottom {
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
bottom: 400px;
}
http://jsfiddle.net/ea9VT/1/
It should not be a scroll.
Can anybody explain how this should be done?
My Suggestion is you can use Jquery for this Animation. I hope this done very simple by using JQuery animate function.

Disable CSS transitions for a single style?

It's pretty easy to enable CSS transitions for a single style, but is it possible to disable them for a single style?
The usual method for single-style transitions is:
div
{
transition: opacity 0.5s;
}
but what I'd like to do is set a global transition, then disable it for a single property. Maybe something like this?
div
{
transition: 0.5s opacity 0s;
}
Is that possible in any way?
EDIT
I don't want to disable ALL transitions for an element, I want to disable ONE transition for an element. i.e. I want all properties to transition EXCEPT opacity.
Here's a fiddle to demonstrate: http://jsfiddle.net/jakelauer/QSJXV/
It seems that you can emulate the needed behavior by setting a very short transition-duration for that one property (see fiddle):
transition: all 3s ease, background-color .01s linear;
I solved this. Example here: http://jsfiddle.net/jakelauer/QSJXV/1/
It works exactly how I thought it should, except I was missing a comma. Correct code example:
transition: 0.5s, opacity 0s;
-webkit-transition: 0.5s, opacity 0s;
You could use the :not pseudo-selector to exclude those elements which you mark with a class that shouldn't have the transition.
div {
opacity: 1.0;
...
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
// Change state for example
div:hover:not(.disable-transition) {
opacity: 0.5;
}
.disable-transition {
// Manually maintain the opacity so there is no change
opacity: 1.0;
}

CSS Transition not working properly

I have the following code: http://jsfiddle.net/8TG8L/
On another part of my HTML I can get the transition CSS to work great, but here on the right hand side I cannot get the transition to have any delay.
Relevant code:
.home_subvid_hover {
background-image:url('http://www.ptroa.com/images/video_hover.png');
/*background-repeat:no-repeat;*/
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
EDIT:
To clarify, please look at this code: http://jsfiddle.net/9UuY7/
That one works although it's the same principle as the first one, why is that?
Thanks,
The reason the background isn't animated, is because the backround-image isn't set on the initial class .home_subvid.
You can't animate background-image:none to background-image:url(...).
If you try this, it's gonna work:
.home_subvid {
background-image:url('http://placehold.it/1x1/000');
background-size: cover;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.home_subvid:hover {
background-image:url('http://www.ptroa.com/images/video_hover.png');
/*background-repeat:no-repeat;*/
}
FIDDLE.
You can't transition background images from none to an image, see this document on MDN. Transitioning from image to image doesn't have amazing browser support either; as far as I know it's only supported in Chrome.
You can, however, create a similar effect with different markup/CSS.
How about an element made invisible with opacity: 0; and then transitioned into opacity: 1; when hovered?
Your css is changing the background image from nothing to an image, which the current generation of CSS can't animate.

Drop-down-menu works great with Firefox, but not with WebKit

I am working on a Drop-Down-Menu only using CSS & HTML5 (no JavaScript) in my personal website. Here it is: http://davidvalles.cu.cc
If you enter with Firefox, the menu works great (it is the one called "Secciones"): when you put the mouse over the "Secciones" div, the menu appears with a transition.
But if you try it with Safari or Chrome, it will work normally, unless you put the mouse UNDER the "Secciones" div. In that case, menu will appear normally. And I don't want the menu to open in that case. I only want it to open when you put the mouse over the "Secciones" link (all the box that contains the Secciones text).
What am I doing wrong? Why does the menu work perfectly in Firefox but not in Safari?
Could you take a look at it? Thank you, and sorry for my poor English, I'm learning. Please, correct me :)
Your easing? Is "ease" a easing value?
-moz-transition: opacity .25s ease;
-webkit-transition: opacity .25s ease;
-o-transition: opacity .25s ease;
-ms-transition: opacity .25s ease;
transition: opacity .25s ease;