iAd Producer 3 : les événements tactiles sur les éléments vidéo et les cartes intégrées peuvent être ignorés après l’application d’une animation
Les événements tactiles sur les éléments vidéo et les cartes intégrées peuvent être ignorés après l’intégration d’une animation
Le problème survient lors d’une tentative d’application d’une animation de transformation à une vidéo ou à une carte à l’aide d’une animation CSS. Si une animation de transformation est appliquée à l’un de ces éléments, elle ne répondra pas aux événements tactiles tant que l’animation ne sera pas terminée. Si l’animation utilise « -webkit-animation-fill-mode: forwards », elle ne répondra pas aux événements tactiles même si l’animation est terminée.
Restructurez votre CSS de manière à ce qu’un remplissage vers l’avant ne soit pas nécessaire. Voir un exemple de code.
video {
left: 0px;
-webkit-animation-name: slide-in;
-webkit-animation-duration: 2s;
}
@-webkit-keyframes slide-in {
from { -webkit-transform: translate3d(-320px, 0, 0); }
to { -webkit-transform: translate3d(0, 0, 0); }
}
Grâce à cette technique, la vidéo est placée à son emplacement final, puis déplacée hors de l’écran avec la première image clé de l’animation. Comme la dernière image clé de l’animation n’est qu’une transformation d’identité, aucun remplissage n’est nécessaire.
S’il n’est pas possible de restructurer votre CSS de cette manière, une autre technique consiste à utiliser JavaScript pour écouter l’événement « webkitAnimationEnd » de l’animation, puis à définir explicitement la position finale de l’élément.
