Question

我正在尝试在CSS动画完成时在web component上触发事件，但是用户可能会使用animation: none;清除元素中的动画，这意味着transitionend } event never fires：

// wait for dialog close animation to end before firing closed event
element.addEventListener('transitionend', function() {

    // fire dialog closed event
    self.dispatchEvent(new CustomEvent('pure-dialog-closed', { 
        bubbles: true, 
        cancelable: true 
    }));
});

为确保我的自定义事件始终触发，我需要确定该元素或其任何子元素是否已应用动画，如果不是，则立即触发pure-dialog-closed事件。

我tried检查style.animationName和self.style.transition，但似乎没有效果。我需要一种简单的方法来检查元素或其任何子元素是否应用了CSS动画。

Answer 1

您可以使用getComputedStyle功能。以下是读取div的transition属性的示例。

在这里阅读更多相关信息 https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

function getTheStyle() {
  var elem = document.getElementById("elem-container");
  var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("transition");
  document.getElementById("output").innerHTML = theCSSprop;
}

getTheStyle();

#elem-container {
  position: absolute;
  left: 100px;
  top: 200px;
  height: 100px;
  transition: all 1s;
}

<div id="elem-container"></div>
<div id="output"></div>

Answer 2

谢谢@Thusitha。我使用window.getComputedStyle以及animation-duration和transition-duration来确定动画是否存在，因为动画/过渡要播放时需要大于0。

以下检查所有元素，包括传入的元素：

＆＃13;

/**
 * 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);

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

Answer 3

您可以收听animationend和animationstart个事件。

＆＃13;

{'Gill': {'foo':3, 'bar':5}, 'Dave': {'foo':4, 'egg':7}}

＆＃13;

let element = document.getElementById("square");

element.addEventListener("animationstart", function(event) {
  element.innerHTML = "RED!"
  element.setAttribute('data-animating', true);
}, false);

element.addEventListener("animationend", function(event) {
  element.innerHTML = "YELLOW!"
  element.setAttribute('data-animating', false);
}, false);

setInterval(() => {
  console.log(element.getAttribute('data-animating'))
}, 500)

＆＃13;

#square{
  width: 100px;
  height: 100px;
  animation-name: anim;
  animation-duration: 4s;
  background-color: red;
  animation-fill-mode: forwards;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
}

@keyframes anim {
    to {background-color: yellow;}
}

＆＃13;

检测元素是否应用了CSS动画的最佳方法是什么

3 个答案: