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>
Related
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 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.
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.
I'm trying to make a roster of member photos. When a user hovers over an image, information slides out from the image or fades into view with a description and links. The roster will change frequently and the members' order may need to be adjusted by a script that calculates their score.
The part of the puzzle I'm working on now is the reveal. With help, I can now make the contents appear, but the the CSS transition is weird and awkward. What is the recommended approach to constructing such an info pane? Using z-index, perphas?
CSS
*{
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
.dude>:first-child{
width:0px;
height:0px;
float:left;
visibility:hidden;
}
.dude:hover > :first-child {
width: auto;
height: auto;
visibility:visible;
float:none;
}
HTML
<table>
<thead><h4>Roster</h4></thead>
<tbody>
<tr>
<td><div class="dude"><div>THIS INFORMATION WILL APPEAR LIKE MAGIC</div><img alt="Scott" src="madeupphotoname.jpg" /><b>Scott</b></td>
<td><div class="dude"><div>THIS INFORMATION WILL APPEAR LIKE MAGIC</div><img alt="Sally" src="madeupphotoname2.jpg" /><b>Sally</b></td>
</tr>
</tbody>
</table>
Your patience and talent is appreciated. For any so interested, here is the jsfiddle of my project.
There are many ways to handle this.
This FIDDLE will show you one way
Each td contains an image and two divs. The one containing text is "hidden" and is only read when you hover over the holderdiv.
The text is moved to a div below the title, but it could be put anywhere, such as a slider, a popup, a bubble, etc...as you see fit.
I agree with Paulie_D's comments - but as a "first-cut", a table is OK.
JS
$('.holderdiv').mouseover(function(){
$('.showme').html( $( this ).text() );
});
$('.holderdiv').mouseout (function(){
$('.showme').html( '' );
});
jsFiddle: http://jsfiddle.net/timspqr/fyXby/5/