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;
}
Related
I simply want to set up a background fadeout animation when a new message is posted in the page.
I just want the background to change. from blue to opacity 0.
Just a basic animation when a new post is added in the page in real time.
I've tried this but it doesn't work, when i add the message, the background color remains blue.
I am using reactJS coupled with SASS/Compass
<div className="successfully-saved"><Message /></div>
.successfully-saved{
background-color:blue;
#include transition(opacity, 1s ease-out);
}
Thanks for helping
Assuming, you want to fadeout/hide message, when a new post is successfully added. You can change the style of the div and set opacity to 0. Something like this. Hope this helps.
let msgEl = document.getElementById('msg');
//To add post successfully, I am just using setTimeout. It may vary in your case.
setTimeout(function() {
msgEl.innerHTML = "Post Successfully Added";
msgEl.style.backgroundColor = 'transparent';
}, 1000)
.successfully-saved{
background-color: blue;
-webkit-transition: background-color 2s; /* For Safari 3.1 to 6.0 */
transition: background-color 2s;
}
<div id="msg" class="successfully-saved"></div>
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
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'm showing and hiding elements with a fade in / fade out effect.
CSS
.element {
opacity: 1.0;
transition: opacity 0.3s linear;
}
.element.hidden {
opacity: 0.0;
}
JS
// hide
$('someElement').addClassName('hidden');
// show
$('someElement').removeClassName('hidden');
The problem with this is that an invisible element still occupies space. If the user tries to click something beneath it, this invisible element intercepts the click and the user gets confused. Is there a CSS property that will make the element non-interactable? I'm aware there are some hacks like setting top:-999em in the .hidden class, but I'm asking if you know any elegant solutions.
You will need to transition visibility as well:
.element {
opacity: 1.0;
visibility: visible;
transition: opacity 0.3s linear, visibility 0.3s linear;
}
.element.hidden {
opacity: 0.0;
visibility: hidden;
}
An element with visibility: hidden can be clicked through; i.e. it won't intercept the click.
If you need the element to disappear altogether rather than continue to occupy space, you need to use display: none instead, but that is not an animatable property so you'll see the element disappear abruptly rather than fade out.
First of all I have to say that I'm working on website which I can only manipulate its CSS.
So, please don't suggest me a javascript/html solution.
Here is my problem,
You can see in this jsFiddle demo, there is a basic toggle display method but it doesn't have a transitions effect on default CSS. The HTML is exactly like that, and I don't have a permission to change its HTML or javascript, I can only play with CSS.
I want to add CSS 3 Transitions effect to this toggle method.
As Jim Jeffers's answer on this question, transitions effect never works on
display: block < - > display: none
So I will always need to keep the element display block.
I tried this but it didn't work,
.infocontent {
-webkit-transition: opacity 1s ease-out;
}
div[style='display: block; '].infocontent {
opacity: 1; height: auto !important;
}
div[style='display: none; '].infocontent {
display:block !important; opacity: 0; height: 0px;
}
Why isn't it working? How can I do that?
Try to use transition on max-height instead of height.