I have a sidebar with a logo on the top. Next to the sidebar is a button, which is used to switch between the normal and compact class of the sidebar. This changes the width of the sidebar, so I added a 0.25s transition-duration, so it has a nice opening and closing animation. The buttonpress also changes the source of the logo. What I want to do is when I first click on the button (in normal view) it changes the image instantly, but when I click on it a second time (in compact view) the image has a 0.25s transition-delay so it only changes after the sidebar has finished opening. Is there a way I can achieve this?
sidebar {
background: red;
transition: background 1s;
}
sidebar.active {
background: pink;
transition: none;
}
<div>click</div>
<sidebar>
lorem ipsum
</sidebar>
Are you open to using jQuery (or vanilla Javascript, for that matter)?
(psuedo code/untested)
in css:
.sidebar-logo.delay-transition {
transition-delay: 0.25s;
}
in script:
$('.my-special-button').on('click', function() {
$('.sidebar-logo').addClass('delay-transition');
})
So, as soon as you click the button the first time it adds a class to give the sidebar a delay. It will continue to behave that way for each subsequent click.
Related
Surprisingly, after googling this for a bit I found tons of questions about how to fade the background of a div (not the text), but none of the converse. Please point me to one if you can find it.
I'm looking for a way to fade in the contents of a div. For example, I have a modal and if I apply the following rule to it:
animation-name: contentfadein;
animation-duration: 1s;
#keyframes contentfadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
Then it fades in everything (including the modal background itself).
Rather, I would like to only fade in the contents, such that the modal immediately loads and has its white background, but all of the contents of the modal fade in (such as the text, buttons, etc.)
All of the approaches I've tried so far also fade in the background, which I am looking to avoid.
The only thing I could think of is to apply this rule on every.. single.. item.. in the modal, but that would result in hundreds of individual rule additions (and also stop working when a new item is added, until that item is "fixed"), which seems inefficient compared to a better way.
You can apply rules to all component inside an element with css easily. Then you will need to deal with text directly inside your container, you can change the color of your text to transparent.
.container{
background: red; /* won't fade */
}
.container, .container *{
transition-duration: 1s;
}
/* This will apply for all content in .container */
.container:hover * {
opacity: 0;
}
/* OPTIONAL : This will apply for text directly in container */
.container:hover {
color: transparent;
}
<div class='container'>
I'm text directly in container
<p>I'm a paragraphe</p>
<input type='submit' value="I'm a submit button"/>
<div>
<p>I'm in a div and a paragraphe</p>
</div>
</div>
I think it was a bit hard to explain what I mean in the title, but pretty much what I want to do is to have a text saying "View guild members", and whenever you press on this text, a list of all members fades in.
Thing is though, I have done research and found dropdown menus, but I don't want it to show the content over the content that are displayed.
Easier to explain with these two pictures:
As you can see, after pressing the button, the content (link 1-3) displays over "hello". I want to push "hello" further down the page.
How do I do this?
In order to accomplish the fade-in animation you need to add these styles in your css:
.show {
display: block;
animation: fadeIn 600ms ease-in-out forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Here is also a codepen to play around with the code.
Is there a way to transition a div to be visible by making it visible from the top and then going down?
Example:
#div {
visibility: hidden;
transition: visibility 1s (??);
}
#outerdiv:hover #div{
visibility: visible;
}
Yes you can, but you can´t do fades in and out with the display option, because it doesn´t have a intermediate state. If you want to acheve a opacity fade, you must use the css opacity option, and a trigger for the div to call this changes. The code will look like the following:
CSS:
div{
opacity: 0;
transition: 1s;
}
/*in this case I will use hover as the trigger*/
div:hover{
opacity:1;
}
On the other hand, if you want the div to do the fade in at the moment that the web loads, you will need to create a function in js, that will be called at the moment that the page loads, using onload="function()".
I have angular code which shows different time segments for a particular day. I want a delete button to appear over a segment if the cursor hovers over it for 2 seconds. I have tried a few different things but I can't seem to get it working
.delete-button {
display: none;
transition: all 3s ease;
}
.time-segment:hover .delete-button{
display: block;
transition-delay: 3s;
}
<button class="delete-button">delete</button>
CSS 'display' property is not animatable. You need to use visibility if you want to do it purely with CSS. Many people set transitions on both opacity and visibility, with the visibility lagging ever-so-slightly behind the opacity, so it neatly fades in and out of view.
here, the delete button must be IN your time segment in order for your css to work. this can be done with pure css, but we must know at least the parent div, else there must be one delete for each segment.
if you have multiple segments and you want to delete a specific on, maybe javascript will be more friendly, with angular it can be pretty simple.
.delete-button {
opacity : 0.2;
}
.time-segment:hover .delete-button{
opacity: 1;
transition: opacity 3s cubic-bezier(1,0,1,0);
}
<div class="time-segment">
hover me
<button class="delete-button">delete</button>
</div>
I'm trying to fade a Modal in when it's clicked, and have the experience be smooth on mobile devices.
I'm setting both opacity to 0 and display to none. Setting opacity alone isn't enough, as it makes the area underneath unclickable.
#Modal {
display: none;
opacity: 0;
transition: opacity 500ms ease 0s;
}
Fade in Code:
$('#Modal').show();
$('#Modal').css('opacity','100');
However, the Modal doesn't fade in, it simply pops into existence.
Setting a setTimeout here works, but who wants a click delay for the fade in?
What's the best way to fade an element in with an opacity transition without chaining together massive properties like z-index, or some such nonsense?
Toogling display property it's bad way for fade element, Similar topics were already processed e.g: CSS3 transition doesn't work with display property
"display:none; removes a block from the page as if it were never there. A block cannot be partially displayed; it’s either there or it’s not. The same is true for visibility; you can’t expect a block to be half hidden which, by definition, would be visible! Fortunately, you can use opacity for fading effects instead."
quotation author:
Hashem Qolami
You should try to do this by deelay like here Animating from “display: block” to “display: none”
or try toogling class like here: http://jsfiddle.net/eJsZx/19/
CSS:
.Modal {
display: block;
opacity: 0;
transition: all 300ms ease 0s;
height: 0px;
overflow: hidden;
}
.ModalVisible {
display: block;
opacity: 1;
height: 50px;
}
Jquery:
$('button').on('click', function () {
$('#ModalId').addClass('ModalVisible');
});
Html:
<div id='ModalId' class="Modal" > content <br> content </div>
<button>show</button>
Why don't you use jQuery's $("selector").fadeIn() method?
The supposedly correct answer above implies that the OP is attempting a transition on display. They are not. Calling show() will set the display property to block. Then setting the opacity should theoretically trigger the transition from opacity:0.
A similar question has been answered here. To quote #WhoTheHellIsThat, the reason the transition is not triggered is...
...because of the way styles are figured out. Style changes are
expensive so they are effectively saved up until they are needed (a
recalc check like .offsetHeight is called or the next frame needs to
be drawn).
However the answer code in that question was Vanilla Javascript, and I couldn't make it work in jQuery. I found another answer that solved it in jQuery, using a class to trigger the transition.
Here is the full CSS...
#Modal {
display: none;
opacity: 0;
transition: opacity 500ms ease 0s;
}
#Modal.fade-in {
opacity: 1;
}
And here is the full JS:
$('#Modal').show(0, function() {
$(this).addClass('fade-in');
});
Here is a fiddle from RoryMcRossan's answer, demonstrating the solution.