I want to fade an item in using opacity and set its visibility accordingly, once the opacity transition is done.
Consider this code:
.menu {
transition: opacity 0.25s ease-out 0s, visibility 0s ease 0.25s;
opacity: 0;
visibility: hidden;
}
.menu.open {
opacity: 1;
visibility: visible;
}
This menu pops straight in, due to the 0.25s delay on visibility, but fades out correctly.
I want it to fade both in and out, but I can't find a way to set a delay function to the visibility property separately for in and out transitions. Is this even possible?
So ideally, I want to tell visibility to have a 0s delay to start and then a 0.25s delay to end, but it seems I can only set one value.
This happens because your item is no longer visible. As you're delaying the visibility transition, your item will get its opacity changed, without this change being visible. Then (0.25s later), the visibility transition begin... but your item has already an opacity: 1.
You should remove the transition delay/duration for visibility when item is showing:
$(document).on('click', function(event) { $('.menu').toggleClass('open'); });
.menu {
transition: opacity 0.25s ease-out 0s, visibility 0s ease 0.25s;
opacity: 0;
visibility: hidden;
}
.menu.open {
transition: opacity 0.25s ease-out;
opacity: 1;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav class="menu open">My menu</nav>
Related
I want to remove the delay I applied after leaving the hover state
I have a little box where I applied a hover effect with different delays. Everything works fine except my paragraph. I did a delay of 4.5s so it will pop out after the .goals-title is dissapeared. But after I leave the hover state it fades out way to slow. Is there a way to remove the delay on leaving the hover state.
/*thats the delay with the transition*/
.goals-text {
transition: opacity 0.75s ease-in-out;
transition-delay: 4.5s;
opacity: 0%;
}
/*the hover effect*/
.goals:hover > .goals-text {
opacity: 100%;
}
You can set a transition-delay that is longer when you hover the element :
/*thats the delay with the transition*/
.goals-text {
transition: opacity 0.75s ease-in-out;
transition-delay: 0s;
opacity: 0%;
}
/*the hover effect*/
.goals:hover > .goals-text {
opacity: 100%;
transition-delay: 2s;
}
<div class="goals">
v hover here v
<div class="goals-text">The animation starts after 2s on hover but immediately on mouse out</div>
^ hover here ^
</div>
It looks so simple but I can handle to make it work.
When a new element is added to my list, I want the others elements to move to let the space for the new one and then the new one has to appear with a fade transition.
I can't make this simple animation. I can make the others elements to move but my new element does not have any fade transition. It just appears! BIM.
Here's a codepen : https://codepen.io/MuyBien/pen/OEqNEQ
.fade-enter-active {
transition: opacity .3s ease-out;
transition-delay: .3s;
}
.fade-enter {
opacity: 0;
}
.fade-enter-to {
opacity: 1;
}
.fade-move {
transition: transform .3s;
}
.fade-enter-active {
transition: opacity 1s ease-out;
transition-delay: 1s;
}
.fade-enter {
opacity: 0;
}
.fade-enter-to {
opacity: 1;
}
.fade-move {
transition: transform 1s;
}
You can just delay the entry.
Transition must happen when we move from one value to another upon a event.
Here the visibility setting on an element:
.two {
background-color: #9fa8da;
position: absolute;
visibility: hidden;
transition: visibility 3ms ease-in;
}
Upon a button click, visibility is set to 'visible'
.two-show {
visibility: visible;
}
However there is no animation effect.
Plnkr here:
http://plnkr.co/edit/4Fhb1Uj744BRwCDhebOP?p=info
Try adding this to .two{}:
-webkit-transition: visibility 30ms ease-in, -webkit-transform 3s;
-moz-transition: visibility 30ms ease-in;
-o-transition: visibility 30ms ease-in;
I wonder if 3ms is to fast?
You can achieve the very same effect you want using the opacity property. Updated your plunker using this new approach. I also increased the transition time for the effect to be noticeable.
.two {
background-color: #9fa8da;
position: absolute;
opacity: 0;
transition: opacity 3s ease-in;
}
.two-show {
opacity: 1;
}
I'm trying to have a menu that has a submenu and this is what I have for the moment (it's more complex than this), I want to use the transition property:
.product:hover #button-option {
visibility: visible !important;
}
#button-option {
visibility: hidden;
-webkit-transition: visibility .2s;
transition: visibility .2s;
}
Here is my jsfiddle: http://jsfiddle.net/4bsmq2kg/
I want my submenu to appear a little later, or like take some time to appear like in here: http://www.vmware.com
How could I make this work? I tried several things but none has been working. Thanks!
EDIT: I'm actually stupid and didn't realize a mistake there was in the code, but I still cannot find what I really wanted to find.
Visibility will transition, but only in binary (on/off) fashion. Perhaps you want to transition on opacity in addition (since visibility needs to be off to prevent mouse detection on the element). You probably also don't need/want the !important. Also, unless you are targeting old browser versions, you don't need the webkit-transition prefixed property (if you're going to specify it, should be -webkit-transition).
Visibility will not animate well. For that you might better animate opacity:
#button-option {
opacity: 0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.product:hover #button-option {
opacity: 1;
}
If you want the menu to slide from left to right, then you can also animate position:
#button-option {
left: -300px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.product:hover #button-option {
left: 0px;
}
You can check for more detail here.
At the end, I mixed opacity with visibility, thank you all! going to try some of your suggestions too, Good Night!
I'm having a issue with the background-image transition using CSS3. The problem is that it occasionally flickers the first time you roll over it. If you roll-over it the second time it's no problem makes a smooth fade-in/fade-out from one to the other.
I've searched google about this issue found a bunch of people having the same problem. But they resolved the issue by using 1 background image and then using background-position to hide it till you roll over it.
I can't do that with mine because I need the smooth fade-in/fade-out animation from 1 image to the other (it's 2 images of the same button with different colors and thingies.) If I use background-position it'll come from underneath the button on it's place. I need a fade-in fade-out animation.
So I'm guessing this issue happens because of the image not being loaded that, and that it needs a fraction of a second to load.
Here's the code:
.btn-denken{
background:url(../images/btn-denken.png);
width:219px;
height:40px;
float:left;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.btn-denken:hover{
background:url(../images/btn-denken-hover.png);
}
Help is very much appriciated! Thank you!
The trick is to make sure that the images you want to do transition on are already loaded by CSS, that's why putting them in the document as dummy's and loading them through CSS is the solution.
In the example below I have 4 images (0.jpg - 3.jpg), and if I would now set the class '.landing-1' on my document (html), the images transition properly.
In my CSS:
body {
-webkit-transition: background 1s;
background: url(0.jpg) no-repeat center center / cover fixed;
}
.dummy-image {
position: absolute;
left: -100%; /* to hide the dummy */
}
Simple javascript to cache the images:
var images = [],
load = function() {
$('head').append('<style>html.landing-'.concat(this.index, ' body.landing, .dummy-image-', this.index, ' { background: url(', this.src, ') no-repeat center center / cover fixed; }</style>'));
$('body').append('<div class="dummy-image dummy-image-'.concat(this.index, '">'));
};
for(var i=0; i<4; i++) {
var image = document.createElement('img');
image.src = i + '.jpg');
image.index = i;
image.onload = load;
images.push(image);
}
Perhaps you can use two separate containers in the same area using absolute positioning and z-index. Set the two different background images one per container, and then when you hover just make the opacity of the top container to be fully transparent.
I had the same problem: I wanted to use transitioning to fade between images. Using a 2-in-1 image (or a sprite) and using css to change it's position on hover doesn't work because you end up seeing the image scrolling side-side or up-down.
(FYI, you're correct - the blink occurs because it takes a moment to load your image but the transition has already begun from the moment you hover. After you've hovered once, the image has loaded so it won't happen again until you reload the page.)
Here is a purely HTML and CSS solution:
Create a containing div
Place an anchor tag and image tag within this container
Set a background image on the anchor tag (this should be the image you want displayed on page-load)
The image tag should be the image you want to display on hover and needs a z-index applied to bring it behind your anchor tag
After much experimentation, I arrived at the following solution:
(Demo here: http://jsfiddle.net/jmtFK/)
HTML:
<div class="button" id="specific">
<img>
</div>
CSS:
.button {
position: relative;
}
.button a {
display: block;
width: px;
height: px;
background: url() no-repeat;
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.button a:hover {
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.button img {
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.button a:hover + img {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
I initially didn't have my z-indexed image set to transparent and found that the edges of it appeared around the outside of the link image. This was ugly so I applied opacity: 0.
I also added CSS transitions for "hover in" and "hover out". (Basically, the transition settings applied to a certain CSS state dictate how it transitions to that state. eg the transition settings applied to .button a take effect when button a:hover is no longer applicable.
I hope that helps.