I made some fandeIn and fadeOut codes to an exercise.
I'm trying to remove the setTimeout() on the fadeIn().
Like using an addEventListner maybe, but there is no transition on .displayNone.
On the MDN I just found transitions interacting with EventListner.
function fadeOut(disable) {
disable.classList.remove('visible');
disable.classList.add('hidden');
disable.addEventListener('transitionend', () => disable.classList.add('displayNone'));
};
function fadein(enable, timer) {
if (!timer) timer = 350;
enable.classList.remove('displayNone');
setTimeout(function () {
enable.classList.remove('hidden');
enable.classList.add('visible');
}, timer);
};
.displayNone {
display: none;
}
.visible {
visibility: visible;
opacity: 1;
transition: opacity 1.5s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 350ms, opacity 350ms, display 350ms linear;
}
P.S.: This works good, I'm just trying another way to make it works too.
The setTimeout method returns a timeout descriptor/id (actually just an integer). You may use it to remove the timeout later:
// setting timeout
var timeout = window.setTimeout(function(){}, 5000);
window.clearTimeout( timeout )
Related
I'm using the technique for delaying visibility transition, combined with opacity. This is working nice:
<body>
<button>run</button>
<div class="box"></div>
</body>
.box {
visibility: hidden;
opacity: 0;
/* property name | duration | easing function | delay */
transition: visibility 0s ease-in-out 3s,
opacity 3s ease-in-out;
}
.box.show {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
The problem happens when I listen to the transitionend event. This should log both visibility and opacity properties, but instead only the opacity is logged (pen here):
const button = document.querySelector('button');
const box = document.querySelector('.box');
// When class "show" is added, only "opacity" is logged
// When class "show" is removed, both "opacity" and "visibility" are logged
box.addEventListener('transitionend', e => {
console.log(e.propertyName);
});
button.addEventListener('click', () => {
box.classList.toggle('show');
});
Why I need to listen to transitioned? with this event I'am checking the number of transition properties (totalProperties); when all properties are transitioned (tracking with a counter), I know that element actually finished all its transitions:
const totalProperties = window.getComputedStyle(element)['transition-property'].split(',').length;
let counter = 0;
const callback = e => {
e.stopPropagation();
if (++counter === totalProperties) {
counter = 0;
box.removeEventListener('transitionend', callback);
console.log('All properties transitioned.');
}
};
box.addEventListener('transitionend', callback);
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event:
If there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.
transition: visibility 0s ease-in-out 3s
Your transition-duration for visibility is 0s here.
Make that .0001s, and you'll see the transitionend event for visibility fire as well.
I've created a slider animation as demonstrated below:
#mixin progress {
#-webkit-keyframes interval {
from {
width: 0;
}
to {
width: 100%;
}
}
animation: var(--duration) linear 0s interval;
animation-play-state: var(--playState);
}
.slider-item {
#include progress;
}
When a click event fires my task is to make the current slider animation be completed.
I have tried to select the target element for example:
this.$refs[`slider-item-${id}`]
Nevertheless, the animation property is still empty, is there something that i'm missing here? or is there a better alternative for that? (i have tried the API https://developer.mozilla.org/en-US/docs/Web/API/Element/animate without success)
Try to replace
animation: var(--duration) linear 0s interval;
with
animation: var(--duration) linear 10ms forwards;
to see the animation end as the last state remaining on your page.
I couldn't get the animation play state to be paused with css3 animation even after using animation-iteration-count to 1 and animation-fill-mode to forwards:
var isRunning = window.getComputedStyle(
document.querySelector('div')
).getPropertyValue('animation-play-state');
setInterval(function(){
console.log(isRunning);
},1000)
#keyframes foo {
0% {
width: 0;
}
100% {
width: 50%;
}
}
div {
animation: foo 2s linear 0s 1 normal forwards;
background-color: #f00;
height: 3px;
}
<div></div>
I should get animation-play-state to be paused when it finishes the animation.
Actually, the following answer that I provided doesn't work for me. In fact, I was working with a pseudo element and pseudo element doesn't accept addEventListener. So, my final solution would be to use this only way.
var isRunning = window.getComputedStyle(
document.querySelector('div'), ':after'
).getPropertyValue('animation-play-state');
Sadly, CSS doesn't seem to set play state to paused when animation is finished. To conclude this question has no findings or solution?
The value of animation-play-state doesn't change once an animation finishes all its iterations.
You'll need to listen for the animationend event and change the value manually:
document.querySelector('div').addEventListener('animationend', function() {
this.style.animationPlayState = 'paused';
console.log(window.getComputedStyle(this).getPropertyValue('animation-play-state'));
});
#keyframes foo {
0% {
width: 0;
}
100% {
width: 50%;
}
}
#foo {
animation: foo 2s linear 0s 1 normal forwards;
background-color: #f00;
height: 3px;
}
<div id=foo></div>
... though I don't really see any reason to do so when your animation-fill-mode is already set to forwards.
I don't know why css3 keeps animation play state to running but go with the animationend event:
var x = document.getElementById("myDIV");
x.addEventListener("animationend", function(){
console.log('paused'); // animation is end
});
Here's the reference for animationend: https://developer.mozilla.org/en-US/docs/Web/Events/animationend
I want to remove a div element on click event but i want to remove it with a fade out effect. I have got some JQuery solution but i need pure JavaScript or css solution.
document.querySelector('.list').addEventListener("click", function(e){
if (e.target.localName === "span") {
var removeTarget = e.target.parentNode.parentNode;
removeTarget.parentNode.removeChild(removeTarget);
};
});
This code is removing the div element with no effect. How can i add a fade out effect?
I've made this function a while ago for a personal project:
function removeFadeOut( el, speed ) {
var seconds = speed/1000;
el.style.transition = "opacity "+seconds+"s ease";
el.style.opacity = 0;
setTimeout(function() {
el.parentNode.removeChild(el);
}, speed);
}
removeFadeOut(document.getElementById('test'), 2000);
There are two ways you can achieve this: CSS3 animation or jQuery animation.
CSS3 Animation
In your CSS document, add:
.list {
opacity: 1;
-webkit-transition: opacity 1000ms linear;
transition: opacity 1000ms linear;
}
This will make any change of opacity to your item fade by 1000ms.
Change line 4 of your JavaScript to:
removeTarget.style.opacity = '0';
setTimeout(() => removeTarget.remove(), 1000);
This will make your item change opacity to 0, thus making the transition from step 1 have an effect. Then it will remove the item with your code after 1000ms.
Note: Make sure the time of the CSS3 transition and the setTimeout are the same.
jQuery Animation
Get jQuery
Go to the jQuery Website and download it, or
Add ` in your HTML document before any jQuery code.
Change line 4 of your Javascript to:
removeTarget.fadeOut(1000)
This will Fade Out your item by 1000ms, you can change this time to whatever you want.
In 2020 you can forgo use of use setTimeout for the animationend event, removing the need to maintain the duration in two places:
.fade-out {
animation: fade 2s;
-webkit-animation: fade 2s;
-moz-animation: fade 2s;
}
/* Animate opacity */
#keyframes fade {
from { opacity: 1 }
to { opacity: 0 }
}
#-moz-keyframes fade {
from { opacity: 1 }
to { opacity: 0 }
}
#-webkit-keyframes fade {
from { opacity: 1 }
to { opacity: 0 }
}
const elementToFade = document.getElementById('my-element');
elementToFade.onanimationend = (e) => {
if (e.target.classList.contains('fade-out')) {
elementToFade.parentNode.removeChild(elementToFade);
}
};
// To fade away:
elementToFade.classList.add('fade-out');
It's a good question, but to animate some element in html, this element has to exist while it is animating. So, you have some ways to do this, a good way is hide this element with CSS and after the animation you remove this element. While you hiding you can animate, you can see this example:
<style>
.hide{
opacity: 0;
}
.fade-out {
transition:1s linear all;
}
</style>
<span class="list fade-out">
This is a List, click me to hide
</span>
<script>
document.querySelector('.list').addEventListener("click", function(e) {
if (e.target.localName === "span") {
//Add CSS hide and animate with fade out
var currentCSS = this.className;
this.className = currentCSS + ' hide';
var removeTarget = e.target.parentNode.parentNode;
setTimeout(function(){
removeTarget.parentNode.removeChild(removeTarget);
},1000);
};
});
</script>
Add the following CSS class to the element using elem.className="my-animation"; on click:
.my-animation {
animation: fade 3s steps(90) forwards;
-webkit-animation: fade 3s steps(90) forwards;
-moz-animation: fade 3s steps(90) forwards;
}
#keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0.0;
}
}
You may control the speed of the animation by modifying the steps(number) as well.
Just goto jQuery source code, take out the fade code which is in pure javascript, and use it, no need to reinvent the wheel,
or a hint is reduce the height of div to 0 slowly using setTimeInterval()
or a css solution would be to use transform and transition properties
Hi I currently have span that displays over an image on hover, however I want to use a bit of javascript or css transitions to make this div fade in to about 0.8 opacity on hover then back to 0 when the mouse is not hovering.
Here is an example of how I have it setup so far, now all thats needed is the fade and 0.8 opacity:
How its setup - Jsfiddle
Im sure there is a simple bit of code that someone has to do this
Help is much appreciated thanks!
So... here's the CSS3 / HTML5-way to do this. This won't work in IE though: it will fall back on the regular, immediate way (so it does work, it just isn't as smooth as it is in the real browsers).
div.yourDiv {
-webkit-transition: .4s ease-in-out opacity;
-moz-transition: .4s ease-in-out opacity;
-o-transition: .4s ease-in-out opacity;
transition: .4s ease-in-out opacity;
}
div.yourDiv:hover {
opacity: 0.8;
}
Since CSS3-transitions are using hardware-accerelation, this really is very smooth! Besides that, you don't even need any Javascript or jQuery for this =)!
You can use CSS's :hover pseudo-class, unless you need to support IE6:
.image-hover:hover {
opacity: .8;
}
* html .image-hover:hover { /* For IE7 and higher */
filter: alpha(opacity=80);
}
That won't fade to 80%, though, it'll just go there immediately. To do that, you can use jQuery's hover and animate functions (edit: or fadeTo, which is just a convenience wrapper for animate on opacity as shown below):
$(".image-hover").hover(
function() {
$(this).stop().animate({opacity: "0.8"});
},
function() {
$(this).stop().animate({opacity: "1"});
}
);
It's not clear from your question what the text in the span is supposed to be doing, but those are the tools to get you started.
Here's an updated version of your fiddle showing the animation; I've used 0.6 rather than 0.8 just so it's more obvious.
.classa
{
opacity:0.8;
}
you can addClass and removeClass like
$("div.image-hover").hover(
function(){
//fadein
$(this).addClass("classa");
},
function(){
//fadeout
$(this).removeClass("classa");
}
);
here is the fiddle http://jsfiddle.net/2RN6E/8/
EDITED after the comment below
you can use fadeTo
$("div.image-hover").hover(
function(){
//fadein
$(this).fadeTo( "2000", "0.8");
},
function(){
//fadeout
$(this).fadeTo( "2000","1");
}
here is the fiddle http://jsfiddle.net/2RN6E/14/
);
You could do:
function fadein() {
$('.desc').animate({
opacity: 0.8,
}, 1000, function() {
// Animation complete.
})
}
function fadeout() {
$('.desc').animate({
opacity: 0,
}, 1000, function() {
// Animation complete.
})
}
$('.image-hover').hover(fadein, fadeout);
fiddle here: http://jsfiddle.net/nicolapeluchetti/2RN6E/9/
This code retains the block display for the description element: http://jsfiddle.net/2RN6E/11/
It just uses the animate function of jQuery:
$(".image-hover").hover(function() {
$(".desc").animate({opacity: '0.75'},'slow');
}, function() {
$(".desc").animate({opacity: '0'},'slow');
});