iAd Producer 3: Touch-Ereignisse auf Videoelementen und eingebetteten Karten werden nach dem Anwenden der Animation unter Umständen ignoriert

Touch-Ereignisse auf Videoelementen und eingebetteten Karten können ignoriert werden, nachdem du eine Animation angewendet hast

Das Problem tritt bei dem Versuch auf, eine Transformationsanimation auf ein Video oder einer Karte mit einer CSS-Animation anzuwenden. Wenn eine Transformationsanimation auf eines dieser Elemente angewendet wird, reagiert sie nicht auf Touch-Ereignisse, solange die Animation nicht abgeschlossen ist. Wenn die Animation "-webkit-animation-fill-mode: forwards" verwendet, reagiert sie auch nach Abschluss der Animation nicht auf Touch-Ereignisse.

Strukturiere deine CSS so neu, sodass kein Vorwärts-Fill Mode erforderlich ist. Schau dir als Beispiel den nachfolgenden Code an.

Video {

links: 0px;

-webkit-animation-name: slide-in;

-webkit-animation-duration: 2s;

}

@-webkit-keyframes slide-in {

von { -webkit-transform: translate3d(-320px, 0, 0); }

bis { -webkit-transform: translate3d(0, 0, 0); }

}

Mit dieser Methode wird das Video an die endgültige Pausenstelle positioniert und dann mit dem ersten Keyframe der Animation vom Bildschirm verschoben. Da der endgültige Keyframe der Animation nur eine Identitätstransformation ist, ist kein Fill Mode erforderlich.

Wenn eine Neustrukturierung deiner CSS so nicht möglich ist, kann als alternative Methode JavaScript verwendet werden, um das Ereignis "webkitAnimationEnd" der Animation abzuwarten und dann explizit die endgültige Position des Elements festzulegen.