css transition-end no event get fired - javascript

i try to get an event if the keyframe-animation is over, but i didn't get it worked.
perhaps somebody can take a look and can tell me what i have done wrong, i tried it with jQuery "on" and with addListener...
i have put an example on codepen http://codepen.io/destroy90210/pen/faeAh
i test it with chrome v25
$(".addView").on("click", function(){
$(".content").append("<div id='col' class='column'>view</div>");
//this doesn´t work
var elm = document.getElementById("col");
elm.addEventListener('webkitTransitionEnd', function( event ) {
alert( "Finished transition!" );
}, false );
//or this
console.log($(".column"));
$(".column").on('webkitTransitionEnd', function () {
alert( "Finished transition! 2" );
});
});
//or this :(
$(".content").on('webkitTransitionEnd', '.column', function () {
alert( "Finished transition! 3" );
});
css
.column{
width: 25%;
float: left;
background-color: #00ff00;
height:100%;
color:white;
text-align:center;
font-size:3em;
font-weight:300;
-webkit-transform-origin: 0% 50%;
-webkit-animation: rotateInFromRight 1s cubic-bezier(.70, 0, .40, 1) 1 normal forwards;
}
#-webkit-keyframes rotateInFromRight{
0% { -webkit-transform:rotateY(90deg);opacity:0}
50%{ opacity:1}
100%{ -webkit-transform: rotateY(0deg); opacity:1}
}
html
<div class="sidebar">
<button class="addView">add View</button>
</div>
<div class="content"></div>

Since you're creating the element that will be animated dynamically, you'll need to attach the handler to that element like this.
$(".addView").on("click", function(){
var elm = $("<div id='col' class='column'>view</div>");
elm.eq(0).bind('webkitAnimationEnd', function() {
alert('Finished transition');
});
$(".content").append(elm);
});
Updated pen.

Related

How to delete the element (loading page + css animation 100%)?

How can I tell p js and jQuery
if #keyframes 100% ???
If #keyframes for the element == 100%, do something specific
My problem is I have an element on the page ,, I want to delete the element when the page loads, and if the animation is done in CSS
Meaning I do not want him to delete the element when the page loads. I just want to delete the element when the page is complete + animation 100%
The element is span (load-span)
HTML :
<a href="#">
<div class="back-move">
<span class="load-span"></span>
<div class="play-move"><span></span></div>
</div>
<p>GG img</p>
CSS:
.load-span {
position: absolute;
background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
width:40px;
height: 100%;
top: -50%;
left: 100%;
animation: load-span 1s;
animation-iteration-count: infinite;
transform: translate(15px, 0px) skewX(35deg);
}
#keyframes load-span {
100%{ top: 100%;left: -100%;}
}
Also I have tried :
$(window).on("load", function () {
$('.load-span').on("animationend", function(){
$(this).remove();
});
})
But it didn't work ):
You can simply remove the animation-iteration-count: infinite; and this below code will work.
$(window).on("load", function () {
$('.load-span').on("animationend", function(){
console.log('fdfdf');
$(this).remove();
});
})
.load-span {
position: absolute;
background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
width:40px;
height: 100%;
top: -50%;
left: 100%;
animation: load-span 1s;
transform: translate(15px, 0px) skewX(35deg);
}
#keyframes load-span {
100%{ top: 100%;left: -100%;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">
<div class="back-move">
<span class="load-span"></span>
<div class="play-move"><span></span></div>
</div>
<p>GG img</p>
The reason your above snippet doesn't work is because your animationend listener is not being called as you've set the animation-iteration-count to infinite, which tells the browser that the animation is never ending.
There are two tricks you can use to solve this,
1.Get rid of infinite from the iteration count and set it to 1, then your code snippet would work
$(window).on("load", function () {
$('.load-span').on("animationend", function(){
$(this).remove();
});
})
2.If you're using some sort of inifinite loader, you could use a timer, as your animation duration is 1s, you can create a setTimeout callback, that checks whether the page has fully loaded or not.
setTimeout(function(){
// Check whether page has loaded or not
}, 1000);
You were close with this. So instead of this:
$(window).on("load", function () {
$('.load-span').on("animationend", function(){
$(this).remove();
});
})
You can try this:
Use webkitAnimationEnd along with animationend
$(window).on("load", function () {
$('.load-span').on("animationend webkitAnimationEnd", function(){
$(this).remove();
});
})
Hope this works!

How do I get multiple css animations to play in javascript?

I'm a bit confused about how to trigger multiple animations for an element using javascript.
I'm trying to get an element (.hud) to fade-in and also bounce when clicked. Currently it will only do one or the other. The second animation class is being added to the element in a on click event. The class gets added but the animation does not play. How would I construct my code for the animation to fade-in and also bounce on click?
<!DOCTYPE html>
<html>
<head>
<style>
.anim {
animation-name: bounceIn_1;
animation-duration: .5s;
}
.hud {
width: 100px;
height: 100px;
background-color: red;
animation-name: fade-in;
animation-duration: .5s;
}
#-webkit-keyframes fade-in {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-webkit-keyframes bounceIn_1{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}
</style>
</head>
<body>
<p>This box should fade in and bounce on click</p>
<div class="hud"></div>
<script>
element = document.querySelector('.hud');
console.log(element);
// reset the transition by...
element.addEventListener("click", function(e) {
console.log("clicked");
e.preventDefault;
element.classList.remove("anim");
void element.offsetWidth;
element.classList.add("anim");
}, false);
</script>
</body>
</html>
Was it so necessary for you? In order for the animation in your example to work constantly, a reset function is needed.
element = document.querySelector('#red_box');
console.log(element);
element.addEventListener("click", function(e) {
e.preventDefault;
console.log("clicked");
element.classList.remove("hud");
element.classList.remove("anim");
void element.offsetWidth;
element.classList.add("anim");
}, false);
/*$(".hud").click(function () {
var $this = $(this);
$this = reset($this);
$this.addClass("anim bounceIn_1");
console.log("clicked");
});*/
.anim {
width: 100px;
height: 100px;
background-color: red;
animation-name: bounceIn_1;
animation-duration: .5s;
}
.hud {
width: 100px;
height: 100px;
background-color: red;
animation-name: fade-in;
animation-duration: .5s;
}
#-webkit-keyframes fade-in {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-webkit-keyframes bounceIn_1 {0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p>This box should fade in and bounce on click</p>
<div id="red_box" class="hud"></div>
</body>
Have you tried to put a comma in your .anim class?
animation: bounceIn_1 .5s, fade-in .5s
You need to put the 2 animation in the same css class and make sure that the removing and the adding of that class are done in 2 separate frames.
The first issue can be easily solved by putting a comma between the 2 animations which are now in the class .anim.
The second issue is a little bit tricky but the window.requestAnimationFrame() function will solve it !
Here you have the modified code so that you can better understand:
element = document.querySelector('.hud');
console.log(element);
// reset the transition by...
element.addEventListener("click", function(e) {
console.log("clicked");
e.preventDefault;
element.classList.remove("anim");
void element.offsetWidth;
window.requestAnimationFrame(() => element.classList.add("anim")); /* The add() will be done before the next repaint so that we can see the change */
}, false);
.anim {
animation-name: fade-in, bounceIn_1;
animation-duration: .5s;
}
.hud {
width: 100px;
height: 100px;
background-color: red;
//animation-name: fade-in; /* Remove this */
//animation-duration: .5s; /* Remove this */
}
#-webkit-keyframes fade-in {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-webkit-keyframes bounceIn_1{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}
<body>
<p>This box should fade in and bounce on click</p>
<div class="hud"></div>
</body>
Quick tip: with this method you can play as many animation as you want on the same element, just add its name to the .anim animations list and you're done!

How do I trigger a CSS keyframe animation by pressing a key on the keyboard? [duplicate]

Naturally, we can create a CSS animation using keyframes, and control it from there.
However, ideally, I would like to trigger this animation from a button click - so the button click would be an event...
#keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}
Now, on click, I want to trigger this animation; as opposed to from within the CSS animation property.
see here jsfiddle
if you want your animation to work every time you press the button use this code :
$('button').click(function() {
$(".fademe").addClass('animated');
setTimeout(function() {
$(".fademe").removeClass('animated');
}, 1500);
});
where 1500 is the animation-duration in this case, 1.5s
$('button').click(function() {
$(".fademe").addClass('animated');
setTimeout(function() {
$(".fademe").removeClass('animated');
}, 1500);
});
.fademe {
width: 100px;
height: 100px;
background: red;
}
.fademe.animated {
animation: fade-in 1.5s ease;
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fademe">
</div>
<button>CLICK ME</button>
EXPLANATION :
on click on the button add class animated ( or any other class ) to the element you want to apply the animation to , .fademe
make a setTimeout(function() to delay the removeClass for the duration of the animation 1.5s or 1500ms
write in CSS the declaration of the animation , #keyframes, and add it to the element with the class added by the JQ .fademe.animated
$("#move-button").on("click", function(){
$("#ship").removeClass("moving");
$("#ship")[0].offsetWidth = $("#ship")[0].offsetWidth;
$("#ship").addClass("moving");
});//
#ship
{
background: green;
color: #fff;
height: 60px;
line-height: 60px;
text-align: center;
width: 100px;
}
#move-button
{
margin-top: 20px;
}
#ship.moving
{
animation: moving 2s ease;
}
#keyframes moving
{
0%{ transform: translate(0px);}
50%{ transform: translate(20px);}
100%{ transform: translate(0px);}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ship">Ship</div>
<button id="move-button">Push</button>
If you want to make the animation happen and always end before allowing the event listener to trigger it again, I would suggest to control the behaviour like this:
// Add this to your event listener
if (!element.classList.contains("myClass")) {
element.className = "myClass";
setTimeout(function() {
element.classList.remove("myClass");
}, 1000); //At least the time the animation lasts
}
There is a toggle method that works just fine for this, hope it helps:
function Fade() {
document.getElementById("box").classList.toggle("animate");
}
#box {
background-color: black;
height: 50px;
width: 50px;
}
.animate {
animation: fademe 0.5s;
}
#keyframes fademe {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<html>
<head>
<title>
Animation Trigger
</title>
</head>
<body>
<div id="box"></div>
<button onclick="Fade()"> Fade above Box</button>
</body>

Make HTML element disappear with CSS animation

I want to know if there is a way to make an HTML element disappear with an animation of CSS. So when the element gets removed from the page by some script, an animation shall display before the element actually gets removed.
Is this possible in an easy way? Or do I need to set a timer to my script that starts the animation with a duration of X and removes the element after time X?
I would get fancy with keyframes
#keyframes myAnimation{
0%{
opacity: 1;
transform: rotateX(90deg);
}
50%{
opacity: 0.5;
transform: rotateX(0deg);
}
100%{
display: none;
opacity: 0;
transform: rotateX(90deg);
}
}
#myelement{
animation-name: myAnimation;
animation-duration: 2000ms;
animation-fill-mode: forwards;
}
If the script is actually removing the DOM element, I don't believe there's a way to fade it out. I think the timer is your only option.
I use jQuery to implement this.
//jQuery
$(document).ready(function() {
var target = $("#div");
$("#btn").click(function() {
removeElement(target);
});
});
function removeElement(target) {
target.animate({
opacity: "-=1"
}, 1000, function() {
target.remove();
});
}
div {
width: 100px;
height: 100px;
background-color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="div"></div>
<input type="button" value="fadeout" id="btn">
</body>
</html>
Use transitions like this:
function waithide()
{
var obj = document.getElementById("thisone");
obj.style.opacity = '0';
window.setTimeout(
function removethis()
{
obj.style.display='none';
}, 300);
}
div
{
height:100px;
width :100px;
background:red;
display:block;
opacity:1;
transition : all .3s;
-wekit-transition : all .3s;
-moz-transition : all .3s;
}
<div id="thisone" onclick="waithide()"></div>
I think you would have to do it in two steps. first the animate. Then, after animate is done, remove the elem. See the function below. Perhaps it could be put in a jquery plugin?
<style>
#test{
background: red;
height: 100px;
width: 400px;
transition: height 1s;
}
#test.hide {
height: 0;
}
</style>
<div id="test"> </div>
<button>Hide the Div</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script>
$('button').click(function(){
removeWithAnimate('#test');
});
function removeWithAnimate(id){
$(id).addClass('hide');
setTimeout( function(){
$(id).remove()
},1000);;
}
</script>
$('button').click(function() {
removeWithAnimate('#test');
});
function removeWithAnimate(id) {
$(id).addClass('hide');
setTimeout(function() {
$(id).remove()
}, 1000);;
}
#test {
background: red;
height: 100px;
width: 400px;
transition: height 1s;
}
#test.hide {
height: 0;
}
<div id="test"> </div>
<button>Hide the Div</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
transition: .5s;
invisible:
opacity: 0;
visible:
opacity: 1;
transition will make it appear and disappear smoothly.

Pointer Class Freezes when User is Idle

I "attached" a keyframe animation to my mouse pointer. Ideally, a pulse should appear around the mouse when the user is idle for 2 seconds, then disappear when they become active. I'm toggling the "pulse" class's visibility. There are two problems:
The keyframe animations is no longer attached to the mouse movement
when the user becomes idle, the animation will appear at any stage of the pulse. It may be very small and faint or thick and opaque, but the ring will be static until the user moves again:
var TimeoutID;
function inputdetect() {
// attaches event handler to specified event
// takes event as string, function to run, and optional boolean
// to indicate when the event propogates
// these are false, so events "bubble up"
this.addEventListener("mousemove",resetTimer,false);
this.addEventListener("mousedown",resetTimer,false);
this.addEventListener("mousewheel",resetTimer,false);
this.addEventListener("keypress",resetTimer,false);
this.addEventListener("touchmove",resetTimer,false);
this.addEventListener("DOMmousescroll",resetTimer,false);
this.addEventListener("MSpointermove",resetTimer,false);
startTimer();
}
inputdetect();
function startTimer() {
//waits two seconds before calling inactive
TimeoutID = window.setTimeout(goInactive,2000); // does it need to take the window variable??
}
function resetTimer(e) {
window.clearTimeout(TimeoutID);
goActive();
}
function goActive() {
//what happens when the UI is not idle
$('p').text("The UI is not idle.");
$('.cursory').css("background-color","green");
$('.pulse').css('visibility','hidden');
startTimer();
}
function goInactive() {
$('p').text("The UI is idle.");
// REPLACING CURSOR WHEN UI IS IDLE
//this part won't work
$('.cursory').css("background-color","red");
$('.pulse').css('visibility','visible');
}
// THIS changes the pointer to a css element
$(document).ready(function() {
$(document).on('mousemove', function(e) {
$('.cursory').css({
left: e.pageX,
top: e.pageY
});
});
});
html {
cursor: none;
}
.cursory {
height: 10px;
width: 10px;
border-radius: 100%;
margin: 0px;
padding: 5px;
background-color: green;
background-clip: content-box;
position: fixed;
}
.pulse {
border: 3px solid blue;
-webkit-border-radius:30px;
height:18px;
width:18px;
position: fixed;
z-index:-1;
left:-7px;
top:-7px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0
}
#-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class = "cursory"><div class = "pulse"></div></div>
<!--this is where the HTML will go*/-->
<p>hello</p>
emphasized text
Add another class to .pulse. And attach the animation to that class. When you don't want animation just remove the class. On reapplying the class animation will start from starting point so you won't see any inconsistency.
Plus to be sure about you animation you give visibility: hidden; to .pulse. but give visibility: visible; in your additional class and mention your additional class like this .pulse.additionalClass. It will override your .pulse's visibility: hidden
#shishir-trivedi Okay, I tried adding the animation to the pulse class and:
var TimeoutID;
function inputdetect() {
// attaches event handler to specified event
// takes event as string, function to run, and optional boolean
// to indicate when the event propogates
// these are false, so events "bubble up"
this.addEventListener("mousemove",resetTimer,false);
this.addEventListener("mousedown",resetTimer,false);
this.addEventListener("mousewheel",resetTimer,false);
this.addEventListener("keypress",resetTimer,false);
this.addEventListener("touchmove",resetTimer,false);
this.addEventListener("DOMmousescroll",resetTimer,false);
this.addEventListener("MSpointermove",resetTimer,false);
startTimer();
}
inputdetect();
function startTimer() {
//waits two seconds before calling inactive
TimeoutID = window.setTimeout(goInactive,2000); // does it need to take the window variable??
}
function resetTimer(e) {
window.clearTimeout(TimeoutID);
goActive();
}
function goActive() {
//what happens when the UI is not idle
$('p').text("The UI is not idle.");
$('.cursory').css("background-color","green");
$('.cursory').removeClass("pulse");
startTimer();
}
function goInactive() {
$('p').text("The UI is idle.");
// REPLACING CURSOR WHEN UI IS IDLE
//this part won't work
$('.cursory').css("background-color","red");
$('.cursory').addClass("pulse");
}
// THIS changes the pointer to a css element
$(document).ready(function() {
$(document).on('mousemove', function(e) {
$('.cursory').css({
left: e.pageX,
top: e.pageY
});
});
});
html {
cursor: none;
}
.cursory {
height: 10px;
width: 10px;
border-radius: 100%;
margin: 0px;
padding: 5px;
background-color: green;
background-clip: content-box;
position: fixed;
}
.pulse {
border: 3px solid blue;
-webkit-border-radius:30px;
height:18px;
width:18px;
/*position: fixed;*/
z-index:-1;
left:-7px;
top:-7px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0
}
#-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class = "cursory"></div>
<!--this is where the HTML will go*/-->
<p>hello</p>
now the whole thing pulses. How do I make the inner circle remain the same size? I've been working on this for a few days. I'm very new to both CSS and jQuery, so please be patient with me.
I thought separating them into separate classes then attaching them would align their actions while keeping their specs separate but it appears to have mashed the .cursor class into the .pulse class.

Categories

Resources