Check If Element Is Being Animated CSS3

Check if element is being animated CSS3

When you change the left property of an element, you can associate a boolean value with it (using data() for instance) and set it to true to indicate a transition has started. Then, you can bind to the transition end event (which varies depending on the browser) and set the boolean value back to false from your handler to indicate the transition has ended.

The end result is something like:

yourElement.on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
    function() {
        $(this).data("transitioning", false);  // Transition has ended.
    }
);

(Note the code above only has to run once.)

---

if (!yourElement.data("transitioning")) {
    // No transition active, compute new position.
    var theNewLeft = yourElement.position().left + 200;
    // Set new position, which will start a new transition.
    yourElement.data("transitioning", true).css("left", theNewLeft);
}

Check if element has css animation

You checking the the hasAnimation before the animation started, because you did not give up your 'timeslice'. (thats the wrong terminology, but I think 'timeslice' just describes whats going on)

AFAIK no Javascript implementaion is - preemtive - multithreaded, at least not at script level. So if you loop, you loop, and nothing else happens.

Imagine events like putting functions on a queue, and these are fired/called one after the other. Well behaved. So if you want to know whats the result of such an event, you have to end your current function (call it giving up the timeslice). Now the event starts - and is the only one now.

So if you enqueue your cleanup_if_no_animation( hasAnimation ) with a setTimeout(0) you dont really play around with times as long as the StartAnimation is not triggert with a setTimeout itself, you just give up, and start again after the (optional start event)

The same situation you have, if you want to cout to 1000 and put this into a DIV. you must use setTimeout(0) between the steps to get the display updated.

like in this example

function bad_loop() {
    for (i = 1; i < 100; ++i) {
        $('#out').text(i)
    } }

function good_loop(i = 1) { 
    $('#out').text(i)
    if (i<50) setTimeout(good_loop,0,i+1) }

Check in javascript if a CSS3 animation is currently running on a DOM element

As you seem to use animation CSS for your animations (given that you use the animationend event), you could use getComputedStyle to verify the content of the animation-name CSS property.

Here is a demo with two buttons: one triggers an animation on click, while the other doesn't:

$("button").click(function () {    buttonClick($(this));});
function hasAnimation($button) {    return getComputedStyle($button[0], null)["animation-name"] != "none";}
function onEndAnimation($button) {    $button.removeClass('activated');    console.log("animation complete on button " + $button.text());}
function buttonClick($button) {    $button.addClass('activated');    $button.one('animationend', () => onEndAnimation($button));    if (!hasAnimation($button)) onEndAnimation($button);}

#yes.activated {    animation-duration: 1s;    animation-name: grow;}
@keyframes grow {  from { width: 50px; }  50% { width: 100px; }  to { width: 50px; }}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="yes" style="width: 50px">Yes</button><br><button id = "no" style="width: 50px">No</button>

What is the best way to detect if an element has a CSS animation applied

Thank you @Thusitha. I used window.getComputedStyle along with animation-duration and transition-duration to determine if an animation existed as either would need to be greater than 0s for an animation/transition to play out.

The following inspects all elements including element passed in:

/** * Determine if an element of any or its children have a CSS animation applied * @param {HTMLElement} el - element to inspect * @returns {boolean} true if an animation/transition detected, otherwise false */function hasCssAnimation(el) {
  // get a collection of all children including self  var items = [el].concat(Array.prototype.slice.call(el.getElementsByTagName("*")));
  // go through each item in reverse (faster)  for (var i = items.length; i--;) {
    // get the applied styles    var style = window.getComputedStyle(items[i], null);
    // read the animation/transition duration - defaults to 0    var animDuration = parseFloat(style.getPropertyValue('animation-duration') || '0');    var transDuration = parseFloat(style.getPropertyValue('transition-duration') || '0');
    // if we have any duration greater than 0, an animation exists    if (animDuration > 0 || transDuration > 0) {      return true;    }  }
  return false;}
var elementToTest = document.querySelector('.one');var result = hasCssAnimation(elementToTest);
alert(result);

div {  font-size: 14px;  padding: 20px;  color: #fff;}
.one {  background: red;}
.two {  background: green;  animation: zoomIn 3s ease; /* <-- animation applied to child */}
.three {  background: blue;}
@keyframes zoomIn {  from {    opacity: 0;    transform: scale3d(.3, .3, .3);  }  50% {    opacity: 1;  }}

<div class="one">  <div class="two"> <!-- animation on child element -->    <div class="three">      Hello World    </div>  </div></div>

CSS Check If Element Is Overflowing Then Animate Back And Forth

Although a max width is set it is not being taken up on the smaller text - notice the widths of both examples are the same.

This snippet gives both the div and the h3 a position so that the widths are taken up and the div is set to have width fit-content (it will still obey the max-width).

The animation needs to take into account both the width of the container and the width of the text. It therefore uses left positioning and transition. For the shorter text they balance out so there is no movement. For the longer text the amount of movement is just the extra length of the text compared to the container.

.animated {
  position: relative;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  background: #0c0c0c;
  display: inline-block;
  width: fit-content;
  position: relative;
}

.text-animated {
  color: #fff;
  animation: backAndForth 5s linear infinite;
  display: inline-block;
  position: relative;
}

@keyframes backAndForth {
  0% {
    transform: translateX(0);
    left(0);
  }
  10% {
    transform: translateX(0);
    left: 0;
  }
  45% {
    transform: translateX(calc(-100%));
    left: 100%;
  }
  55% {
    transform: translateX(calc(-100%));
    left: 100%;
  }
  90% {
    transform: translateX(0);
    left: 0;
  }
  100% {
    transform: translateX(0);
    left: 0;
  }
}

<div class="animated">
  <h3 class="text-animated">
    Some Short Text
  </h3>
</div>
<span>Must be fixed</span>

<br><br><br>

<div class="animated">
  <h3 class="text-animated">
    Some Long And Bigger Text To Animate
  </h3>
</div>
<span>Must be Animated to view all text</span>

How do I find out with jQuery if an element is being animated?

if( $(elem).is(':animated') ) {...}

More info: https://api.jquery.com/animated-selector/

---

Or:

$(elem)
    .css('overflow' ,'hidden')
    .animate({/*options*/}, function(){
        // Callback function
        $(this).css('overflow', 'auto');
    };

Detect if property is animatable by CSS3 transition?

Edit: see Jordan's answer for a good technique on detecting animatable properties.

I'm afraid there is no straightforward way to detect if a property is animatable. However, the properties are consistent for the most part (the only problem I've encountered is with FF4 transition + text shadow + transform).

http://www.w3.org/TR/css3-transitions/#the-transition-property-property-#properties-from-css-

Firefox 3.6 doesn't support css transitions, you can detect this with a js library such as Modernizr:

http://www.modernizr.com/

How to check if DOM node is animating in jQuery

Try using the following:

$('div').on('click', '.item', function() {
    $this = $(this); // cached so we don't wrap the same jquery object twice
    if (!$this.is(':animated')) {
        animate($this);
    }
});

View: animated selector documentation

Demonstration: http://jsfiddle.net/smerny/tBDL8/1/

detect if element is being transitioned

You can use the Web Animation API for that, notably the Element#getAnimations method, which will return a list of Animation objects applied on the Element. These will include Web Animations (from .animate()), CSS @keyframes animations, and CSS transitions.

document.querySelectorAll("a").forEach((el) => {
  el.onmouseenter = (evt) => {
    const animations = el.getAnimations(); // we could also ask to look in the subtree
    // we're only interested in CSS transitions
    const transitions = animations.filter((anim) => anim instanceof CSSTransition);
    console.log(transitions.length
      ? transitions.map((anim) => anim.transitionProperty )
      : "no transition"
    );
  };
});

a:hover {
  color: red;
  opacity: 0.5;
}
.color-transition {
  transition: color 1s;
}
.color-and-opacity-transition {
  transition: color 1s, opacity 5s;
}

/*SO-only*/.as-console-wrapper { max-height: 110px !important }

<b>Hover these anchors to log their applied transitions.</b><br>
<a class="color-transition">color transition</a><br>
<a class="color-and-opacity-transition">color & opacity transition</a><br>
<a>no transition</a>

Is there a way to tell if an element has completed a CSS3 transition?

Use the transitionend event. Note that vendor-specific prefixes have to be added.

---

Related Topics