Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/01/2014, 12:21
Avatar de berkeleyPunk
berkeleyPunk
 
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 12 años, 1 mes
Puntos: 22
Sonrisa Problema con el prefijo comercial de OPERA ANIMATION en Javascript

Buen día.

La idea es sencilla: que cuando se pase el cursor encima de un div visualizado en Opera, se ejecute una animación, y cuando se quite el cursor, se ejecute otra animación.

El código que pondré a continuación lo he probado en Chrome, Firefox, IE11 y ha funcionado perfectamente. Pero no funciona en Opera 12.16. ¿Por qué?


Código CSS:
Ver original
  1. /*                   animation_1
  2.                         IDA                     */
  3. @-o-keyframes animation_1
  4. {
  5.     0%   {-o-transform:translateX(0%);}
  6.     20%, 24%, 100%  {-o-transform:translateX(66%);}
  7.     22%  {-o-transform:translateX(46%);}
  8.     55%  {-o-transform:translateX(54%);}
  9. }
  10. @keyframes animation_1
  11. {
  12.     0%   {transform:translateX(0%);}
  13.     20%, 24%, 100%  {transform:translateX(66%);}
  14.     22%  {transform:translateX(46%);}
  15.     55%  {transform:translateX(54%);}
  16. }
  17.  
  18.  
  19. /*                   animation_2
  20.                         VUELTA                */
  21. @-o-keyframes animation_2
  22. {
  23.     0%   {-o-transform:translateX(66%);}
  24.     20%, 24%, 100% {-o-transform:translateX(0%);}
  25.     22%  {-o-transform:translateX(26%);}
  26.     55%  {-o-transform:translateX(16%);}
  27. }
  28. @keyframes animation_2
  29. {
  30.     0%   {transform:translateX(66%);}
  31.     20%, 24%, 100% {transform:translateX(0%);}
  32.     22%  {transform:translateX(26%);}
  33.     55%  {transform:translateX(16%);}
  34. }
  35.  
  36.  
  37. .caja {
  38.     position:absolute;
  39.     top:100px;
  40.     left:-400px;
  41.     width:500px;
  42.     height:100px;
  43.     background-color:green;
  44. }


Código Javascript:
Ver original
  1. function animar(objeto)
  2.     {
  3.         objeto.addEventListener('mouseover',function()
  4.         {
  5.             objeto.style.animationName = 'animation_1';
  6.             objeto.style.animationDuration = '500ms';
  7.             objeto.style.animationFillMode = 'forwards';
  8.             objeto.style.animationIterationCount = '1';
  9.             objeto.style.animationTimingFunction = 'ease';
  10.         },false)
  11.  
  12.  
  13.         objeto.addEventListener('mouseout',function()
  14.         {
  15.             objeto.style.animationName = 'animation_2';
  16.             objeto.style.animationDuration = '500ms';
  17.             objeto.style.animationFillMode = 'forwards';
  18.             objeto.style.animationIterationCount = '1';
  19.             objeto.style.animationTimingFunction = 'ease';
  20.         },false)
  21.     }


Código HTML:
Ver original
  1. <div class="caja" onmouseover="animar(this)">    </div>



En el JS que he puesto arriba está declarado el estandar. Y Opera lo jala a medias, hace extraños, y después de un rato, deja de funcionar. Le he puesto el prefijo de Opera así:
Código Javascript:
Ver original
  1. objeto.style.OAnimationName = 'animation_1'; // Lo he intentado con la "O" en mayúscula.
  2. objeto.style.oAnimationName = 'animation_1'; // Lo he intentado con la "O" en minúscula.
y de plano no funciona.

¿Qué cambios necesito hacer para que funcione en Opera?

Saludos cordiales