JavaScript display none after CSS3 animation - javascript

I have div with id='mainmenu'. I'm adding CSS3 transition to it by JavaScript after button click (by adding 'transition' to #mainmenu and by creating class .fadein and .fadeout that will be added to the div element). Code:
<div id='mainmenu'></div>
<button id="btn1">Click me1</button>
<button id="btn2">Click me2</button>
#mainmenu {
width:100px;
height:100px;
background:#eee;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}
.fadeout {
opacity:0;
}
.fadein {
opacity:1;
}
var menu = document.getElementById('mainmenu'),
btn1 = document.getElementById('btn1'),
btn2 = document.getElementById('btn2');
btn1.addEventListener('click', function() {
menu.className = 'fadeout';
}
btn2.addEventListener('click', function() {
menu.className = 'fadein';
}
The problem is that now I want to add display none and block to fadeout and fadein option. So after the fadeout animation div should get display none, and after fadein display block:
btn1.addEventListener('click', function() {
menu.className = 'fadeout';
menu.style.display = 'none';
}
btn2.addEventListener('click', function() {
menu.className = 'fadein';
menu.style.display = 'block';
}
Unfortunately, the display none and block executes with the animation, so the animation isn't working (element gets display none, without the opacity animation). I want first the animation with opacity, and after that display none/block for the element. Is there any way to do it? I can use only pure JavaScript (no jQuery etc.).

You need to use setTimeout() with menu.style.display = "none"; in order to let fade do it's job before you trigger style.display.
btn1.addEventListener('click', function() {
menu.className = 'fadeout';
setTimeout(function() {
$(menu).css('display', 'none');
}, 1000);
}
btn2.addEventListener('click', function() {
menu.className = 'fadein';
setTimeout(function() {
$(menu).css('display', 'block');
}, 1000);
}

Although this is an old post, for future visitor's sake, you can use the transitionend event. You can use:
/*For when object has fully faded*/
menu.addEventListener("transitionend", function() {
if (this.className == "fadeout") {
this.style.display = "none";
}
}.bind(menu));
/*Show before animation starts*/
menu.addEventListener("click", function() {
this.style.display = "block";
}.bind(menu));

I could be wrong here, however i believe you need to add a transition-end trigger that does the display:block / display:none change.
see: CSS3 transition events

I use height 0 instead of display none for some cases but It may or may not apply for what you need. Anyway here's the code:
1) Using transitions (looks like jQuerys fadeOut):
.fadeOut{
opacity : 0;
height : 0;
transition : opacity 800ms, height 0 800ms;
}
if you want you can add width 0 too.
.fadeOut{
opacity : 0;
width : 0;
height : 0;
transition : opacity 800ms, height 0 800ms, width 0 800ms;
}
2) Using animations (it works but transitions is better):
.fadeOut{
animation : fadeout 800ms linear forwards;
}
#keyframes fadeout{
99%{
opacity : 0;
height : initial;
}
100%{
opacity : 0;
height : 0;
}
}

Related

Add animation when opening & closing Div element

I have this page with menu-link (#navBtn), and #mobileLinks div that opens and closes when clicking #navBtn.
I would like to add fade-in animation when #mobileLinks div is opened, and fade-out animation when the #mobileLinks div is closed. I would like to achieve this with pure JavaScript.
I managed to insert the fade-in animation already, but don't know how to add the fade-out animation as well.
var content = document.getElementById("mobileLinks");
var button = document.getElementById("navBtn");
button.onclick = function(){
if(content.className == "open"){
content.className = "";
content.animate([{opacity:'0.0'}, {opacity:'1.0'}],
{duration: 1500, fill:'forwards'})
} else{
content.className = "open";
}
};
#navBtn
#mobileLinks {
display: none
}
#mobileLinks.open {
display: flex;
}
You can handle the styles entirely in CSS, and only toggle a class with Js.
With CSS & Js
const menu = document.getElementById("menu")
function toggleMenu() {
menu.classList.toggle("isOpen");
}
#menu {
opacity: 0;
transition: opacity 0.2s ease-out;
}
#menu.isOpen {
opacity: 1;
}
<a onClick="toggleMenu()">menu</a>
<nav id="menu">
<a>link</a>
<a>link</a>
</nav>
Or with JS only
const menu = document.getElementById("menu")
menu.style.opacity = '0'
menu.style.transition = "opacity 0.2s ease-out"
function toggleMenu() {
// Toggle between 0 and 1
menu.style.opacity ^= 1;
}
<a onClick="toggleMenu()">menu</a>
<nav id="menu">
<a>link</a>
<a>link</a>
</nav>
You can achieve it using jquery effect
To show your element, use fadeIn() and to hide an element, you can use fadeOut()
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeOut();
$("#div3").fadeToggle();
});
});
</script>
You can do it with JS. You can change the opacity of the element to hide it and along with css transition property to make fade effect
var container = document.getElementById("container")
function clicked() {
if (container.style.opacity == 0) {
container.style.opacity = 1
}
else {
container.style.opacity = 0
}
}
#container {
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<div id="container">Some Text</div>
Submit

How to trigger css animation w/ delay on click using javascript/jquery?

so I have a question. I'm trying to start up CSS animation through Javascript/JQuery. The animation is of my navigation menu. It consists of 4 links each placed in a div with the width set to zero. The animation makes the width 100% of the parent's width at a delay for +100ms starting at 300 from top element to bottom so it appears as if the all come out separately to form the menu. Also a method to reverse the animation on click would be great as well. I tried using toggle() but was unsuccessful.
<div class="navbar">
<div id="nav1">Home</div>
<div id="nav2">About</div>
<div id="nav3">Work</div>
<div id="nav4">Msg</div>
</div>
Here is the javascript code
function expand() {
var navName = '#nav';
var delay = 0;
for(i = 1; i < 5; i++){
//Resets nav value
navName = '#nav';
delay = 200
//Adds number to class name
navName += i;
delay += 100;
//alert(navName + delay);
$(navName).css('animation', 'expand ease 500ms forwards');
$(navName).css('animation-delay', delay +'ms');
}
Rather than apply the animation property using JQuery, you could apply it by toggling a class. This class would contain the animation properties you need already.
$('.target').on('click', function() {
$(this).toggleClass('animate');
});
.target {
padding: 1em;
background: cornflowerblue;
}
.animate {
animation: expand 1s linear;
animation-delay: 200ms;
}
#keyframes expand {
0% {
transform: scale(1);
opacity: 0;
}
60% {
transform: scale(2);
opacity: 1;
}
100% {
transform: scale(1.5);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target">click me</div>

Fade on load doesn't work

So I found this solution Using CSS for fade-in effect on page load And I've used Method 2 with raw JavaScript. Here's my code sample
JavaScript
var fadeOnLoad = function () {
document.getElementById("wrapper").className += "load";
};
fadeOnLoad();
CSS
#wrapper {
opacity: 0;
transition: opacity 2s ease-in;
}
.load {
opacity: 1;
}
Link to the website where it doesn't work https://skidle.github.io/projects/weather
And this text is crossed out in Google Dev tools
try to define
opacity: 1 !important;
id selector has higher priority than class
Here is a snippet with clear process logic. Element is invisible until body got loaded. As soon as event body onload fired, element gets opacity: 1;
function fadeOnLoad() {
document.getElementById("wrapper").className = "";
};
#wrapper {
transition: opacity 2s ease-in;
}
.not_loaded {
opacity: 0;
}
<body onload="fadeOnLoad()">
<div id="wrapper" class="not_loaded">text</div>
</body>
Add important to your class attribute.
.load{
opcacity: 1 !important; //because you have id selector with opacity to 0.
}
As a good practice, try to avoid using IDs for styling.
Instead of defining the transition in the #wrapper selector, create a class containing the transition property like so:
.opacity-transition {
transition: opacity 2s ease-in;
}
Once the transition ends, this class will not be needed any more and can be removed.
Create another class to initially hide the #wrapper element. When this class is removed it will trigger the transition.
.hidden {
opacity: 0;
}
Code Snippet:
function fadeOnLoad() {
//Cache the selector.
var wrapper = document.getElementById("wrapper");
console.log(wrapper.className);
//Add event listener for transition end.
wrapper.addEventListener("transitionend", function() {
//Remove the class which is not needed anymore.
this.classList.remove("opacity-transition");
console.log(this.className);
});
//Remove hidden class to start the transition.
wrapper.classList.remove("hidden");
};
.opacity-transition {
transition: opacity 2s ease-in;
}
.hidden {
opacity: 0;
}
<body onload="fadeOnLoad()">
<div id="wrapper" class="opacity-transition hidden">
text</div>
</body>
JSFIDDLE

How to ignore an transition based on javascript

Heyy guys,
At first I want to apologize for my bad english.
I am making an site wich you can find here for the moment: http://rekenopjetoekomst.nl/test/test.html
When you scroll down the height of the foto under the menu will decrease. But the arrows that you need to navigate trough the slideshow have to disappear also. I am doing that by changing the opacity to 0 with a transition.
But my problem is that when you scroll down and then scroll fast up (a second or something) you will still see the arrows (with an opacity of 0.6 or something). Soo.. What I want is: When the arrows are out of the screen the opacity must be 0 without an transition. And if you scroll back to the foto the arrows have to appear with an transition.
Thnx for all your help!
Javascript (with only the arrows 1 and 2):
function yScroll(){
pijl1 = document.getElementById('pijl1');
pijl2 = document.getElementById('pijl2');
yPos = window.pageYOffset;
if(yPos > 100 && yPos < 370){
pijl1.style.opacity = "0.8";
pijl2.style.opacity = "0.8";
} else if(yPos > 370){
pijl1.style.opacity = "0.0";
pijl2.style.opacity = "0.0";
}
}
var animateInterval = setInterval(yScroll,10);
CSS:
#mainbox #foto #pijl1 {
transition: opacity 1s ease-in 1.3s;
}
#mainbox #foto #pijl2 {
transition: opacity 1s ease-in 1.3s;
}
I would use a tri-state setup.
the first state is the visible (normal) one. The second is the fading state, the opacity is set to 0, and there is a transition on it. The third one is the out state. in this one, we set the opacity to 0, but without delay.
To manage this, we create 3 classes, and asign each one according to the scroll level
demo with extended timings so it is easier to see
function yScroll(){
ele = document.getElementById('test');
yPos = window.pageYOffset;
if(yPos > 200){
ele.className = "out";
} else if(yPos > 100){
ele.className = "fading";
} else {
ele.className = "normal";
}
}
var animateInterval = setInterval(yScroll,10);
#test {
height: 50px;
width: 100px;
margin-top: 300px;
background-color: green;
}
.pusher {
margin: 3000px;
}
.out {
opacity: 0.1;
transition: opacity 0.1s;
}
.fading {
opacity: 0.2;
transition: opacity 20s;
}
.normal {
opacity: 1;
transition: opacity 20s;
}
<div id="test"></div>
<div class="pusher"></div>

confusion regarding toggle() effect and event in jquery

I have two div elements "trigger" and "target". I was looking for a mechanism where every time "trigger" is clicked, a script animates the height of "target". However I need it to toggle between 0px and 100px. After some research I found this
On searching a little I found the following script
$("#trigger").toggle(function(){
$("#target").animate({height:40},200);
},function(){
$("#target").animate({height:10},200);
});
However it didnt seem to work.. after some more searching I came across the following script
$(document).ready(function()
{$("#trigger").click(function()
{
$('#target').toggle(
function()
{
$('#target').animate({height: "250"}, 1500);
},
function()
{
$('#target').animate({height: "0"}, 1500);
});
});
});
and this didn't work either. The element does animate but along with the height, the width and opacity would also animate. Further research brought me to this effect. So basically there are two toggle(). in jquery, and i'm confused about how each is used. All I want to do is animate the height of one element with a toggle when another element is clicked. I hope I have been clear enough.
You could just add a variable like var trigger = false;
var trigger = false;
$("#trigger").click(function(){
if(!trigger) {
$("#target").animate({height:40},200);
trigger = true;
}
else {
$("#target").animate({height:10},200);
trigger = false;
}
});
You could use toggleClass instead:
$("#trigger").click(function() {
$(".target").toggleClass("higher");
});
in your css you then use:
.target {
height:50px;
background-color:#f00;
-webkit-transition: height 1s;
-moz-transition: height 1s;
-ms-transition: height 1s;
-o-transition: height 1s;
transition: height 1s;
}
.higher {
height:100px;
}
http://jsfiddle.net/JSfa3/

Categories