Develop Reference

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.

making position:absolute div relative after toggleFade()

I've got a project where i've overlaid two imaged and have the top image fade out using a toggleFade function, when the user clicks a toggler (checkbox). it works well, except that to get the images to function correctly the bottom image is set to position:absolute. Of course, when the toggleFade() happens, the absolute positioning means all the lower divs float up.
$(document).ready(function(){
$('.lights').on('click', function (){
$('.day').fadeToggle(3000);
setTimeout(function() {$('.night').css('position: absolute');}, 3000);
});
});
is there any way to prevent this from happening? i've tried setTimeout for the lower div, but that didn't work.
here's the jsFiddle of my project:
https://jsfiddle.net/jsieb81/oue2fnr0/

You can add a class on click event and manage opacity in css with a transition. Like this :
(You don't need jQuery)
document.querySelector('.lights').addEventListener('click',function(){
document.querySelector('.day').classList.add('hide');
});
.hide {
opacity: 0;
-webkit-transition: opacity 3s;
transition: opacity 3s;
}
see this fiddle https://jsfiddle.net/oue2fnr0/9/

CSS: Adding a Delay to Submenu Dropdown on Hover (Bootstrap 3 / MegaNavbar 2.2)

Now i am officially desperated. I bought a Script to use a MegaMenu on my Site.
The Script is MegaNavBar 2.2
http://preview.codecanyon.net/item/meganavbar-v-220-advanced-mega-menu-for-bootstrap-30/full_screen_preview/8516895?_ga=2.119686542.744579007.1495443523-2131821405.1495443282
I wanted the script to open the submenus on hover, so i configured it as described on the Demo-Page (see above).
This worked fine. But i wanted to add a delay, because its irritating users, if they move the mouse pointer from top to bottom, and everytime the menu is open immediately while hovering.
What i tried:
Asking the support - No Answer
Trying to add an animation and animation-delay
The Animation is working, but the delay is not working, i assume because of the "display:block"
Trying to add an transition
The Transition is not working, because Transition is not working with "display:block".
Is there anybody out there, who can help me with this stuff?
Here is my Bootply:
https://www.bootply.com/A50M0Wk9NK
(The assumed css rule is in line 29 of pasted css-code)
Best Regards,
Michael

You can try to use Visibility instead of Display, and thus use transitions.
e.g.:
div > ul {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
visibility: visible;
opacity: 1;
transition-delay:2s; //set delay here
}

How to keep div visible when hovering another div

I found a few similar threads here after a good while of searching, but none of them was in the same situation as me, so i decided to ask.
I got this drop-down menu that gets the height 460px when i hover over a tab, and loses the height when unhovered. I need the menu to stay there even when the mouse is moved from the tab over to the menu.
Like this: http://jsfiddle.net/muo4ypvc/
I can accomplish this by setting the menu position to relative, however i need the position to be absolute in order to adjust the z-index.
When i try to set the position to absolute, the menu won't keep the 460px height on hover, it only has the height when the tab is hovered. I've also tried some other things like wrapping all the html in a container, and put that as the mouseleave element, but with no success. How can i make it stay on both tab and menu hover?
html
<div id="tab">
<a id="tab">Categories</a>
<div id="menuDropdown">
<div id="innerDropdown">
<!-- menu content -->
</div>
</div>
</div>
js
$(document).ready(function() {
var inner = $('#innerDropdown')
var rolldown = $('#menuDropdown');
$('#tab').mouseenter(function() {
rolldown.toggleClass('show');
if(rolldown.hasClass('show'));
setTimeout(showInner, 130); /* waits 'til drop-down animation is finished */
function showInner(){
inner.toggleClass('show');
}
});
$('#tab').mouseleave(function() {
inner.toggleClass('show');
rolldown.toggleClass('show');
});
});
css
#menuDropdown {
position: absolute;
transition: (some long ass transition code);
}
#menuDropdown.show {
height: 460px;
}
#menuDropdown.hide {
height: 0px;
}
#innerDropdown.show {
display: block;
animation: fadein .15s;
}

I wrapped your html into another div to show that the wrapper keeps its height, but I'm not sure I understand what you're trying to do and what doesn't work. I basically just added position: absolute:
.description {
position: absolute;
}
See demo: http://jsfiddle.net/4tb29u6h/1/

Fading div in and out on center slider item

I'm trying to fade a div in/out on a center slider item.
I'm using owl-slider, the center slide/item gets assigned the class .center by the slider.
Each slide has a div called Age, and I'm trying to make it so this Age div is hidden on all slides which don't have the .center class, and it fades in on the center slide.
The center slide is navigated by the owl-prev/owl-next controls, so this is what I was thinking to trigger the change.
Is it a more efficient way to do this?
Example:
The issue I'm having is how to test for the presence of the .center class on document load, and also how to initially set the Age div not visible on load also.
I've tried $(".item-age").hide(); and it works, but when I click the next control all Age divs appear, not just the one associated with .center.
This is what I'm trying: `
$(".owl-next").click(function(){
if ($('.owl-item').hasClass('center')){
$('.item-age').fadeIn();
}
});`

I think the best way is to use CSS with Transitions.
Define the two states for the age div:
.age {
opacity: 0; /* transparent = invisible */
}
.center .age {
opacity: 1; /* opaque = visible */
}
This already does the trick for hiding/showing the age div. To get the fading effekt, add css transition properties:
.age {
opacity: 0; /* transparent = invisible */
transition: opacity 1s; /* fade out transition */
}
.center .age {
opacity: 1; /* opaque = visible */
transition: opacity 500ms; /* fade in transition */
}
The transition is always defined in the target state of the transition. To get a better understanding of the transition-property refer to this MDN article.

I think you are trying to do something like this
$(".next").click(function(){
if ($('.sliderItem').hasClass('center')){
$('.age').fadeIn();
}
});

You can use the .fadeIn() function on the element that has the .center class directly by changing your selector target to .owl-item.center.
Try changing your code to:
$(".owl-next").click(function () {
$('.owl-item.center .item-age').fadeIn();
});