How to trigger some javascript before CSS transition? - javascript

I have an element whose width increases when another element beside it is hovered over, i.e.
.div2 {
width: 0px;
display: none;
transition: width 2s;
}
.div1:hover ~ .div2 {
width: 100px;
}
I want to change the display to block on mouseover, but before the CSS transition. Then, similarly, I want to change the display back to none after the CSS transition finishes. I tried using .onmouseover to set the display to block, but it set it after the CSS transition.
Is there any way to set the display to block before the CSS transition?

As I understood your question, You can have two classes one for hidden (display :none) and another for visuallyHidden (may be visibility : hidden). On hover use visualy hidden class to get the css transition in effect(take help of JavaScript to add this class). You must take a help of setTimeout here (10 Ms ) should be fine to add another class which actually implements css transition. when it is un hovered you need to recycle logic again. hope it helps

Related

CSS how do I add transition to my modal using javascript

I am a bit new to CSS and I know there are more topics like this around. But none seem to be the solution for my problem. So after 2 hours of trying all sort of hidden, transition, display etc and with the risk of posting a duplicate here is my question.
How do I make this modal show up smooth using CSS and Javascript?
The CSS
/* The Modal (background) */
.modalestate {
visibility: hidden; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 25;
top: 15;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
transition: all ease 1s;
}
/* Modal Content/Box */
.modalestate-content {
background-color: rgba(0,0,0,0.0);
margin: 12% auto; /* 15% from the top and centered */
padding: 22px;
float:left;
width: 550px; /* Could be more or less, depending on screen size */
transition: all ease 1s;
}
/* The Close Button */
.closeestate {
color: #aaa;
float: right;
font-size: 20px;
font-weight: bold;
}
.closeestate:hover,
.closeestate:focus {
color: whitesmoke;
text-decoration: none;
cursor: pointer;
}
The divs to show the modal and its content:
<div id="mymodelestate" class="modalestate">
<div class="modalestate-content">
<span class="closeestate">×</span>
<div id="responsecontainer" align="center"></div>
</div></div>
The Javascript:
<script>
// Get the modal
var modal = document.getElementById("mymodelestate");
// Get the button that opens the modal
var btn = document.getElementById("btnestate");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeestate")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.visibility = "visible";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.visibility = "hidden";
}
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
if (event.target == modal) {
modal.style.visibility = "hidden";
}
});</script>
Thanks in advance guys !
What kind of "transition" are you trying to do? What effect do you want to apply to your modal? It's not very clear, but I'm going to guess you are trying to have the modal fade in and fade out slowly as the user clicks the buttons. This assumption comes from the fact you are using visiblity:hidden/visible.
If you are trying to have a fade-in/fade-out effect, you need to set the opacity to 0 instead:
opacity: 0;
And when you want to display it, you set opacity to 1.
However, you are going to run into many other issues. Though, I will say this will be a good learning exercise to familiarize yourself with how elements in HTML work and their interactions with CSS.
EDIT: As promised from my comments, I'll provide an example here and some advice.
First, you have the BODY. This BODY, is literally like a human body. You attach elements to it (or human parts). You have this down pretty good, you even use the z-index so I won't go over this too much. I know more "advanced" devs are going to say something about the DOM blah blah it's not attached yada yada, but we're going to keep it simple here.
Next is that the elements all have a initial attribute associated to them. For example, a DIV element has inline-block as an initial attribute. P element tag has some margin and is a block element. Etc etc. You can obviously override these with CSS or add extra attributes as you have been doing. By giving an element a CLASS, you are creating your own custom element of sorts (though it is still it's base element, DIV, P, A, SPAN, etc)
Next is understanding all of these attributes. You seem to know a good deal amount of attributes so I won't go over much, but I will go over these:
Visibility - The element still exists on the BODY. It's there, it still touches everything and affects everything around it. Think of it as an invisible arm on a human body. You can still use that arm and touch things, make things move, push things away, etc... It's just literally invisible. The GPU or whatever is driving graphics will simply NOT render this element.
Opacity - Similar to visibility, but you get some more control. Opacity of 1 (or 100%) means the element is completely visible. An opacity of .5 or 50% means the element is only half seen. That means things behind it can be seen through it. The GPU is still rendering this element but you can now include transparency. 0 means it has complete transparency (basically it's invisible).
Display - This is used to set how an element behaves in your body and how it interacts with other elements. You will often see or even use "display: none" which makes it seem like the element does not exist anymore (it's still there in HTML, though). It will no longer affect anything around it.
Now, what's more important is to understand some of the more complexities of these attributes. In your case, you should know about transitions. A transition attribute allows you to modify the browser's handling of attribute manipulation on an element. In simpler terms, as you know, it lets you create effects on elements, such as fading in, fading out, movement, etc. And it comes out nice and smooth (if done correctly).
However, these attributes that are being manipulated occur instantly. Thus, as mentioned, transitions give you that control to make it smooth. HOWEVER, it is important to note that these transitions will only work when an element already has attribute values to be manipulated. For example:
.MyDivClass{
height: 32px;
width: 32px;
transition: all .3s ease;
}
.MyDivClassExtra{
height: 64px;
width: 64px;
}
The div will seem to grow larger over .3 seconds. That is because my height and width are set. If I did "NOT" set width/height or even set it to atuo, it will just happen instantly. Because there was no attribute to be manipulated! Even setting height/width to 0 will work, because at least it has an attribute to work with.
You have to sometimes set aside common sense when it comes to programming. Things like Visibility you'd assume if you turn it on and off with transition, it'll fade in nicely. However, no. Visibility is simple ON or OFF. There is nothing to transition into. With opacity, it is not just simply ON or OFF. There are 101 numbers (infinite actually, I guess...) to transition from. 0% to 100%. You can do decimals, too. The same is true with display. A little more complicated but simply put - there is only ON or OFF with display.
Some other notes on your code is that your .modelstate element is on top of everything. Your users won't be able to click anything because of this. Visibility hidden does not make it unclickable. Like I mentioned, it simply makes it invisible - it's still there affecting everything else.

Add smooth transition to button which is becoming bigger after click event

With a javascript click-event I am adding extra html-text (to be specific: an "X"-icon" within a span) to a button. I am doing this with switching the property on the span-icon-class from display: none to display: block.
The button therefore becomes bigger because of the added icon after the click event instantly.
What CSS/js do I need to add, to make this transition smooth, so that the button grows slowly bigger instead of instantly?
Thanks a lot and sorry for maybe complicated questioning.
Maybe look at https://www.w3schools.com/css/css3_transitions.asp.
If you have a fixed initial button width, it should be something like this :
JS :
$('.mybutton').on('click', function(){ $(this).addClass('clicked') };
CSS :
.mybutton{
width : 90px;
transition : width 0.5s ease;
}
.mybutton.clicked{
width : 120px;
}
Yes, you can add CSS to do such a transition. However, you can't use from display: none -> block for a CSS transition. If I don't remember it incorrectly it's because it transitions over time, and display: none/block is a binary system, meaning it can only be shown or not shown, there is no in between. I believe visibility can be used instead because it supports this in-between state of both existing and not existing so to speak.
See this question: Transitions on the display: property
Also, google "css transition display none block" and you'll get a bunch of helpful links.
Okay, I resolved it with a scale-property. I transition the scale of the x-icon, which also slowly enlarges the button.

Trigger event during a css transition

I want to add a class / set a custom z-index during a css transition.
In my researches, I didn't find anything except webkitTransitionEnd which don't do the work.
I have an animated div on hover but if I hover multiple div, he go below the other, that's why I want to set a custom class during the transition (not during the hover).
Here is a jsfiddle (simplified for webkit)
and the problem in image
Edit: The real problem is when I hover a div, unhover, rehover, hover an other, so it's hard to do a simple timeout...
The problem is that when you "un-hover", the switch to the original z-index is happening instantaneously. So the rotating panel is no longer painted in front of its neighbours.
The easiest way to solve that is to make sure that the z-index value is being transitioned as well. It wasn't transitioning in your code as you had it, because z-index was being set on the parent div.panel but your transition functions were only applied to the child div.front and div.back.
This seems to work even when you switch between panels mid-transition:
http://jsfiddle.net/8Fvdb/1/
.panel{
transition: z-index 1s;
}
(Note that I've commented-out the z-index values on the individual panel faces for simplicity; it doesn't seem to change anything either way on Chrome, haven't tested elsewhere.)
I would give for granted that the CSS transition will succeed, and just remove the class after a timeout equal to the transition time:
with a transition of 2s:
.panel {
transition: opacity 2s;
}
set this timeout to remove the class after 2000 ms:
setTimeout(function(){
//you remove the class after the transition time
$('.panel').removeClass("transition-running");
},2000)
$('.panel')
//you add the class before changing the style
.addClass("transition-running")
.css("opacity","0.1");

Why does changing style via JavaScript gets affected by CSS transition

I am simply changing changing the color and background-color of a button when I click on it.
<input type="button" value="click me" id="myButton" onclick="ChangeColor()"/>
The CSS of this button contains CSS transition for the color and background-color, however, on the :hover pseudo-element I didn't add any styles, I didn't change the color.
#myButton{
color:#3399FF;
background-color:#FFFFFF;
/* These transitions are supposed to change the color in case I hover over the button */
-webkit-transition: background 0.5s,color 0.5s;
-moz-transition: background 0.5s,color 0.5s;
transition: background 0.5s,color 0.5s;
}
#myButton:hover{
/* But since there's nothing here, the color won't change when I hover */
}
Now, when I change the styles via JavaScript, they change while using the transitions, means, the colors will change after 0.5s, and not instantly.
function ChangeColor()
{
document.getElementById("myButton").style.color = "#FFFFFF";
document.getElementById("myButton").style.backgroundColor = "#3399FF";
}
This is a really good thing, and I like it, but I'm just wondering, how does JavaScript respect CSS3 transitions? Is there any documentation for this?
Your transitions are applied whenever the value of the property is changed. It doesn't matter whether you change it on hover, focus, resize (with a media query for example), click or any other event via JavaScript.
In general, you have a transition between two states of the element. You first define the initial state:
#myButton {
color: #39f;
background: #fff;
transition: .5s;
}
When you change the value of either of those two properties (and it doesn't matter whether you do this using the :hover pseudo-class or JavaScript), your element will go into another state and you are going to have a transition between the values of the properties from the initial state and those from this new state.
The method you're using to change the style with JavaScript is essentially a way of manually changing the style attribute directly on the element itself. Any time the style changes to something else and you have a transition defined for it, that transition will activate to change to the new style. That includes changes that JavaScript makes to the styles.

jQuery Mouseenter and mouseleave actions

I am using the following jQuery script:
$("#divid").mouseenter(function() {
$('#divid').show(1000);
}).mouseleave(function() {
$('#divid').hide(1000);
});
$("#hldiv").mouseenter(function() {
$('#divid').show(1000);
}).mouseleave(function() {
$('#divid').hide(1000);
});
As you can see, when the mouse hovers over a hyperlink called #hldiv, the #divid should be shown. The main goal is to keep the DIV shown if the mouse is over the DIV - but the #divid should not be visible initially.
If the mouse moves over the hyperlink, the DIV should appear, and when the mouse then moves over the DIV, it should stay until the mouse leaves.
The problem is that with my current code, when the user moves over the hyperlink and then out - the DIV appears/disappears correctly, but when the user moves out of the hyperlink and over the DIV itself, the DIV also disappears.
How should I fix this?
Why don't you add a container and do:
<div id='container'>
<a ID="hlDiv">hlink</a>
<div ID="divId">Test Test Test</div>
</div>
$(document).ready(function() {
$("#hlDiv").hover(function() {
$('#divId').show(1000);
})
$('#container').mouseleave(function(){
$('#divId').hide(1000);
});
});
fiddle here: http://jsfiddle.net/w68YX/8/
If I understood right, rewriting
$("#divid").mouseenter(function() {
$('#divid').stop(true);
$('#divid').show(1000);
}).mouseleave(function() {
$('#divid').hide(1000);
});
Might help, since it stops the current animation (fading out) and fades it back in (if it has already turned a bit transparent).
However this depends on your HTML, and might not work in your case, so please post the structure also.
I am very late to this party - but there is a far better way to do this, so I want to add it for the sake of future browsers. You don't need jQuery for this effect at all.
First, wrap the two items in a container (here I'm using a div with class container), and apply a class to the item you want to appear/disappear on hove (here I'm using the show-on-hover class on the #divId element)
<div class="container">
<a id="hlDiv" href="...">link text</a>
<div class="show-on-hover" id="divId">popup stuff</div>
</div>
Next, set up your CSS as follows:
.container > .show-on-hover { display: none; }
.container:hover > .show-on-hover { display: block; }
#divId { /* whatever styles you want */ }
The effect is that the hover is now controlled entirely by CSS - but, it doesn't have the 1s transition you originally had. This is a little more complicated (and currently doesn't work in IE - but will be supported as of IE10).
Simply change the CSS as follows:
.container { position: relative; }
.container > .show-on-hover { opacity: 0.0; position: absolute; }
.container:hover > .show-on-hover { opacity: 1.0; }
.show-on-hover {
-webkit-transition: opacity 1s; /* Chrome / Safari */
-moz-transition: opacity 1s; /* Firefox */
-o-transition: opacity 1s; /* Opera */
}
The relative positioning on the .container means that the container sets its own bounding boxes for its child elements and their positioning. This means that when you then set the > .show-on-hover styling to position: absolute;, it will still be constrained to its parent (if you set left: 0; as an example, it will move to the left edge of the .container, rather than the screen).
The opacity toggle now simply makes the absolutely positioned item show/disappear wherever you've placed it (and you would update the CSS to put it exactly where you want, relative to the hyperlink). Because we're no longer using display: none - the DIV will always take up space on the screen - even when hidden (which is probably not what you want).
Finally - the last block, which sets transitions, tells modern browsers that whenever the opacity changes on elements of class .show-on-hover, make that change happen as a tween over 1s of duration.
Here is a jsFiddle showing the transitions: http://jsfiddle.net/TroyAlford/nHrXK/2
And here is a jsFiddle showing just the toggle: http://jsfiddle.net/TroyAlford/nHrXK/3/

Categories

Resources