I encountered such a problem，i need to play animation by css3,here is my sass code:
.new-page4-play{
.contain_doll{
#-webkit-keyframes contain_doll_play{xxxx}
-webkit-animation:contain_doll_play 1s;
}
.contain_photo{
#-webkit-keyframes contain_photo_play{xxxx}
-webkit-animation:contain_doll_play 2s linear 2s;
.icon{
#-webkit-keyframes contain_icon_play{xxxx}
-webkit-animation:contain_doll_play 3s linear 3s;
}
}
}
and i want to trigger the callback after all animation complete (it should be 6s),but
document.querySelector('.new-page4-play').addEventListener("webkitAnimationEnd",callback)
will trigger callback 3 times,1s,4s and 6s,so what should i do to make the callback work once on when 6s?
add a counter variable the can be accessed by the callback function
a=0;
someName(){
a++;
if(a==3){
//do something
}
}
Related
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 )
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
I have written the following function for a school project, but the clearinterval() is not working. I have looked at several questions about the same problem and it was a problem with the scope most of the time.
However, I think my function uses a global variable, which should work. It doesn't, and I have no idea why. Please enlighten me.
HTML (actually part of a table with similiar rows)
<tr id="row35" data-uitval="1" class="">
<td>
<button type="button" id="knopje" class="tabeluur" data-uur="35" onclick="check(this)">
<p>✕</p>
</button>
</td>
<td> other cells... </td>
</tr>
Code (Javascript, in <head>-tag)
var fadingFunc;
var busy = false;
function check(uurID) {
if(busy) {
$('#foutmelding').html('Uw vorige bewerking loopt nog. Wacht totdat deze is afgelopen.')
} else {
uitval(uurID);
};
};
function uitval(uurID) {
// makes the button child (<p>) fade out and back in continuously
fadingFunc = window.setInterval(fadeBlink(uurID), 2000);
$.post(
'AnswerMe.php',
{
// send stuff
},
function(data) {
if(data === 'succes: uitval toegevoegd') {
window.clearInterval(fadingFunc);
// do stuff
} else if(data === 'succes: uitval verwijderd') {
window.clearInterval(fadingFunc);
// do stuff
} else {
window.clearInterval(fadingFunc);
// do stuff
};
}
);
};
Note 1: I stripped all the code that actually does something, since it is irrelevant for this question.
Note 2: I tested this on my computer (localhost, google chrome) and fadingFunc does hold a value in global scope (tested via console in developers mode)
So if I got it - you want the X inside the button to blink while the post request is waiting for the response.
Your code is almost there but you are not using the setInterval correctly and you are choosing a poor approach to achieve that. First we will fix your code and then check out my approach using a CSS animation.
To fix your code:
Code must be placed inside the <head> tag since you are using some inline call.
Remove all window. not needed - use setInterval( instead of window.setInterval.
When setting the actuall interval function wrap the target function with a function -setInterval(function(){ fadeBlink(uurID); }, 2000)
See It work: JSFIDDLE
The second approach which I think will be better for you is to add a class before the request and remove it when its done. the class obviuslly will be animated.
Second approach: JSFIDDLE
Second appraoch code:
JS
var busy = false;
function check(uurID) {
if(busy) $('#foutmelding').html('Uw vorige bewerking loopt nog.');
else uitval(uurID);
}
function uitval(uurID) {
$(uurID).addClass('blink');
busy = true;
$.post('http://fiddle.jshell.net/_display/',
{ test:'test' },
function() {
$(uurID).removeClass('blink');
busy = false;
}
);
}
CSS
.blink p {
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}