Question

我有一个父母和孩子的div。两者都有transitionend的事件监听器，并且都具有同时触发的动画。问题是transitionend监听器仅针对父级触发，而永远不针对孩子触发。该事件旨在删除/添加将div重置为原始状态的div。

我制作了一个JS小提琴，它显示了问题的简化版本

var createEventListener = function(element, removeClass, addCLass) {
  return element.addEventListener("transitionend", function(event) {
    event.target.classList.remove("animating", removeClass);
    event.target.classList.add(addCLass);
    return true;
  }, false);
}

CSS：

.animating {
  transition: transform 1s;
  &.main {
    background: purple;
  }
  &.second {
    background: orange;
  }
}

在小提琴中，过渡结束后，下部div保持橙色，而不是恢复为红色。这意味着“动画”类没有被删除，并且事件没有被解雇。

为什么不呢？

Answer 1

更新

OP的测试演示过于复杂。以下演示......

有#parent和#child <section>
两个主题都具有相同的动画属性transform:rotate(1800deg)和transition:transform 1s。
动画由:hover
一个简单的jQuery函数会在每个transition:transform事件中发出警报。警报会将e.target标识为＆＃34;父母＆＃34;或者＆＃34;孩子＆＃34;。

一个完全悬停应该只有2个警报，这意味着鼠标必须通过两个<section>才能看到成功的测试。如果只是将鼠标悬停在#parent上并希望#child触发transitionEnd只是因为它与它的父母一起旋转，那就是错误的逻辑。为了触发事件，通常需要在元素和用户动作之间进行真正的交互（至少在这种情况下）。

段

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <style>
    section {
      -webkit-transition: -webkit-transform 1s;
      transition: transform 1s;
    }
    section:hover {
      -webkit-transform: rotate(1800deg);
      transform: rotate(1800deg);
    }
    #parent {
      width: 100px;
      height: 100px;
      outline: 5px dashed blue;
      margin: 20px 0 0 20px;
    }
    #child {
      width: 50px;
      height: 50px;
      outline: 2px solid red;
      margin: 0 auto;
      margin-top: 12.5%;
    }
  </style>
</head>

<body>



  <section id='parent'>PARENT
    <section id='child'>CHILD</section>
  </section>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script>
    $('section').each(function(i) {
      $(this).on('webkitTransitionEnd transitionEnd', function(e) {
        var self = this;
        if (e.target == this) {
          var tgt = e.target.id;
          alert(tgt + " has reached transition end");
        }
      });
    });
  </script>
</body>

</html>

＆＃13;

<小时/> 将转换设置为all

FIDDLE

更改

.animating {
  transition: all 1s; /* changed */
}

＆＃13;

var btn = document.getElementById("button");

btn.addEventListener("click", function(event) {
  var main = document.getElementById("main");
  var second = document.getElementById("second");

	createEventListener(main, "expanded", "open");
  createEventListener(second, "open", "collapsed");
  
  second.classList.add("animating", "open");
  main.classList.add("animating", "expanded");

  second.classList.remove("collapsed");
  main.classList.remove("open");
}, true);

var createEventListener = function(element, removeClass, addCLass) {
  return element.addEventListener("transitionend", function(event) {
    event.currentTarget.classList.remove("animating", removeClass);
    event.currentTarget.classList.add(addCLass);
    return true;
  }, true);
}

＆＃13;

.group {
  margin: 0 auto;
  width: 100px;
  height: 200px;
  border: 5px solid black;
}

.main {
  width: 100px;
  height: 100px;
  background: blue;
}

.second {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  top: 100px;
}

.main.open {
  transform: translate(0, 0);
}

.second.open {
  transform: translate(100%, 0);
}

.expanded {
  transform: translate(-100%, 0);
}

.collapsed {
  transform: translate(100%, 0);
}

.animating {
  transition: all 1s;
}
.animating.main {
  background: purple;
}
.animating.second {
  background: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Run</button>

<div class="group">
  <div class="main open" id="main">
    <div class="second collapsed" id="second"></div>
  </div>
</div>

＆＃13;

transitionend Listener仅针对父级触发

1 个答案:

更新

段

更改