У меня есть набор вкладок, каждая из которых содержит дочерний элемент, который анимирует. Когда я нажимаю на каждую вкладку, происходит анимация дочернего элемента на вкладке. Я не хочу, чтобы это бежало. Я хочу, чтобы анимация запускалась в первый раз, а не воспроизводилась, когда родительский переключательdisplay:none вdisplay:block.

В приведенном ниже примере у меня есть 2 родительских div, каждый с дочерним div, который анимируется справа. Когда каждый родитель настроен на блокировку повторов анимации, я не хочу, чтобы это произошло. Я хочу, чтобы каждый ребенок оставался вправо. Как я могу это сделать?

$(".toggler").on("click", function() {
  $(".parent").toggleClass("active");
});

.parent {
  display: none;
  cursor: pointer;
}
.child {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: move 200ms cubic-bezier(.91, .8, .54, 1.39);
}
.active {
  display: block;
}
.child.red {
  background-color: red;
}
.child.blue {
  background-color: blue;
}
@keyframes move {
  from {
    left: 0;
  }
  to {
    left: 180px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>

<div class="parent active">
  <div class="child red"></div>
</div>

<div class="parent">
  <div class="child blue"></div>
</div>

Скрипка Демо