Eu tenho um conjunto de guias que cada um contém um elemento filho que anima. O que acontece quando clico em cada guia é que a animação do elemento filho dentro da guia é executada. Eu não quero que ele corra. Quero que a animação seja executada pela primeira vez e não seja reproduzida quando for a alternância pai dedisplay:none paradisplay:block.

No exemplo que fiz abaixo, tenho 2 divs pai, cada um com um div filho que é animado à direita. Quando cada pai está definido para bloquear as repetições da animação, não quero que isso aconteça. Quero que cada criança fique posicionada à direita. Como posso fazer isso acontecer?

$(".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>

Fiddle Demo