I have a div with a background color and css transitions
#foo {
background-color:rgba(255,0,0,0.9);
-webkit-transition: all 3000ms ease;
-moz-transition: all 3000ms ease;
-o-transition: all 3000ms ease;
transition: all 3000ms ease;
}
I also have a button. When the button is clicked, I would like to
immediately switch the div to transparent background and a final height
create a fade-in effect on background-color property only
To accomplish this, I've created some classes for the div
#foo.transparent {
background-color:transparent;
}
#foo.final {
background-color:rgba(255,0,0,0.9);
height:400px;
}
and apply them to the div with jQuery on click
$('#start').click(function() {
$('#foo').addClass('transparent').addClass('final');
});
Unfortunately, height switches immediately to the final value (this is correct), but the background color doesn't perform the required transition from transparent to final value. What am I missing?
(fiddle)
I think an easier solution might be to use jQuery's fadeIn() effect, like this:
Html:
<button id="start">start animation</button>
<div id="foo">some content</div>
CSS:
#foo {
background-color:rgba(255,0,0,0.9);
}
#foo.final {
height:400px
}
JQuery:
$('#start').click(function() {
console.log('click');
$('#foo').addClass('final').hide().fadeIn();
});
And your updated fiddle: https://jsfiddle.net/aqw4cbss/3/
height is not animatiable. use min-height && max-height instead.
plus the backgrounds in your initial state and final state are the same, so how can it be transitioned from 2 equals state.
jsfiddle
I think you should look into JQuery .animate and .css functions.
$('#foo').css("opacity", "0");
$('#foo').animate({backgroundColor: "green"}, 500);
note: you should specify a default background-color and opacity in the css to transition from.
EDIT: You'll need the JQuery Color plugin in order to make this work (it's very small.)
https://github.com/jquery/jquery-color
Related
I have a less file that hide and display an element like the following:
.cmp-accordion__panel {
&--hidden {
display: none;
}
&--expanded {
display: block;
-webkit-animation: slide-down 0.5s ease-out;
-moz-animation: slide-down 0.5s ease-out;
}
}
#-webkit-keyframes slide-down {
0% {
opacity: 0;
-webkit-transform: translateY(-5%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
#-moz-keyframes slide-down {
0% {
opacity: 0;
-moz-transform: translateY(-5%);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
In my JavaScript, I toggle the class name of the element between "cmp-accordion__panel--hidden" and "cmp-accordion__panel--expanded" if the event is triggered. I use keyframe and opacity to animate the transition from "display:none" to "display:block".
However, when I go from "display:block" to "display:none" to hide the element, the effect happens INSTANTLY. What should I add to animate the hiding?
As already said, is not possible animate or transition from display:block; to display: none; but this could be simulated in another way and is not necessary to use CSS animations, simply CSS transitions (in addition, is not necessary anymore to use vendor-prefixes to declare transitions or animations).
Please, look at this working example:
HTML (I inserted a fake content to create an element with a relative big height)
<div class="cmp-accordion__panel--expanded">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</div>
LESS
[class*="cmp-accordion__panel"] {
border:solid 1px red;
overflow:hidden;
transition:opacity 0.3s ease-out, max-height 0.8s ease-out;
}
.cmp-accordion__panel {
&--hidden {
max-height:0;
opacity:0;
}
&--expanded {
opacity:1;
max-height:1000px;
}
}
Please note that, thanks to attribute partial value selector I added also some rules that apply to both *--hidden and *--expanded classes (I personally prefer a general class and an addition of a second one in some cases, instead of switching between two, but I did not want to change too much your approach).
The key rule is switching between two values of max-height property, from a 0 value to another "enough big" one. If you effectively know final height of the element you can simply use also height property, but in case of dynamic content, max-height did the trick.
Please note also the presence of overflow:hidden; applied to both classes, to simulate height changes.
Finally, animation effect relies only on a CSS transition applied to opacity and max-height properties, with different timings to enhance effect.
You cannot animate or transition from display: block; to display: none;, so you will need to remove this if you wish to animate it.
To ensure it fades and is removed you should animate the visibilty and opacity attributes.
Alternatively if you are using jQuery you can use the .fadeOut() function.
MDN - CSS Visibility
jQuery - fadeOut()
I create this very simple layout in which there are a button that user can click to open and close the menu.
I try to add a CSS transition when menu is opening/closing but it seems not to work.
This is the div that should be use the transition:
<div className={`${isMenuOpen ? "w4" : "w-0"} bg-yellow transition`} />
.transition {
transition: all 1.5s ease;
}
Why?
The problem is that .w-0 doesn't have a defined width. The transition property needs an initial value to transition from.
Just add this to your CSS file:
.w-0 {
width: 0;
}
I'm trying to get a css background color to fade out right after the page loads without any user interaction. Can this be done?
This can be done using CSS animations. There is a property animation-delay which can be set in seconds.
animation-delay: 2s;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
Here is a simple example of a background fading after 2 seconds: http://jsfiddle.net/eKAf2/
Personally I'd have the background set in CSS. Then modify the document with jQuery. So I'd set the background color
CSS
body {
background: #009dff;
}
Then set the background color that the page fades into, and add the transition
JS
$(document).ready(function() {
$("body").css("transition", "3s"); // Adding transition
$("body").css("background", "#fff"); //Background color to fade into
});
Plus here's a demo.
With pure JS you can use onload on the body and set up a function, then call it that way.
If you had an element eg: .elem
<div class="elem"></div>
Styles:
.elem {
width: 100px;
height: 100px;
background: red;
}
You could have a css class eh .nobackground that set the background to transparent with a transition.
.nobackground {
background: transparent !important;
transition: all 1s;
}
You could then apply this class to the element on page load with jquery.
$(document).ready(function(){
$(".elem").addClass("nobackground");
});
Heres a bin. Hope this helps.
How can I keep my divs in the hovered state permanently once initially hovered?
Ideally I need something that is going to work with the existing code (if possible) as there are many instances:
#cover:hover img{
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
}
If you are asking to hover over an element, and continue display that element after the cursor has moved away from it, this cannot be done in CSS. It must be done with Javascript.
I would create a class for the state after the image is hovered and before, like so.
.hover-to-change {
opacity: 0.0;
-webkit-transition: all 0.2s ease-in-out;
}
.hovered {
opacity: 1.0;
}
Then add some jQuery to change the class when the image is hovered.
$(document).ready(function() {
$(".hover-to-change").mouseenter(function() {
$(this).addClass('hovered');
)};
});
This should work.
Because CSS is only markup, it will not actually change the state of the HTML or CSS unless it is immediately specified in the page. But the -webkit-transition should work without any additional jQuery.
I want to change the background color of the page when one hovers over a button/div tag using only CSS3 transitions. I want the color to come gradually and hence would like to use a transition effect, but I don't know how to relate the background color of the page to a hover event on a div. Can someone please help me with my code ? Thank You
This is not currently possible in CSS3.
In the future (CSS4?), you'll be able to do it as follows:
body {
background-color: red;
transition: background-color 1s ease;
}
$body #theButton:hover {
background-color: green;
}
Note the $ in the second selector; It indicates which element the CSS block applies to. Unfortunately, there's not even a single implementation of this yet, so you'll have to resort to Javascript (which I assume you know how to do. If not, just ask).
Update (using jQuery):
CSS:
body {
background: red;
transition: background-color 1s ease;
}
body.hover {
background: green;
}
Javascript:
$('#theButton').hover(function(){
$('body').addClass('hover');
}, function(){
$('body').removeClass('hover');
});
Here's the fiddle: http://jsfiddle.net/mWY88/1/
For maximum efficiency, you should cache your selectors.
In fact, you can change the body background-color very easily with CSS3 transition animation like I'm doing it here. I got the logic from here.