| <html> |
| <style> |
| div { |
| position: relative; |
| height: 100px; |
| width: 100px; |
| background: green; |
| } |
| </style> |
| <body> |
| <p> |
| Each section below has two boxes, the top runs as if no style change, the bottom |
| runs with on-the-fly style/source/target changes. |
| </p> |
| <hr> |
| |
| Layer attach/detach test (style.display block -> inline -> block) |
| <br> |
| <div id="test1_ref">REFERENCE</div> |
| <div id="test1_reattach">STYLE CHANGE</div> |
| <hr> |
| |
| Layer attach/detach test (style.display block -> none -> block), source, target. |
| <br> |
| <div id="test2_ref">REFERENCE</div> |
| <div id="test2_reattach">STYLE CHANGE</div> |
| <div id="test2_target">TARGET CHANGE</div> |
| <hr> |
| |
| <script> |
| var opacityKeyframes = [ |
| {opacity: 0}, |
| {opacity: 1} |
| ]; |
| |
| var player1_ref = test1_ref.animate(opacityKeyframes, { |
| duration: 5000, |
| delay: 100, |
| }); |
| var player1_reattach = test1_reattach.animate(opacityKeyframes, { |
| duration: 5000, |
| delay: 100, |
| }); |
| |
| test1_reattach.style.display = 'inline' |
| test1_reattach.style.display = 'block' |
| |
| var leftKeyframes = [ |
| {left: '100px'}, |
| {left: '600px'} |
| ]; |
| var translateKeyframes = [ |
| {transform: 'translateX(100px)'}, |
| {transform: 'translateX(600px)'} |
| ]; |
| var reverseTranslateKeyframes = [ |
| {transform: 'translateX(600px)'}, |
| {transform: 'translateX(100px)'} |
| ]; |
| |
| var player2_ref = test2_ref.animate(leftKeyframes, { |
| duration: 5000, |
| delay: 100, |
| }); |
| var player2_reattach = test2_reattach.animate(translateKeyframes, { |
| duration: 5000, |
| delay: 100, |
| }); |
| |
| test2_reattach.style.display = 'none' |
| test2_reattach.style.display = 'block' |
| |
| setTimeout(function() { |
| test1_reattach.style.display = 'inline' |
| test2_reattach.style.display = 'none' |
| }, 500); |
| |
| setTimeout(function() { |
| test1_reattach.style.display = 'block' |
| test2_reattach.style.display = 'block' |
| }, 2000); |
| |
| setTimeout(function() { |
| var animation = new KeyframeEffect(test2_reattach, |
| reverseTranslateKeyframes, 5000); |
| player2_reattach.source = animation; |
| }, 3000); |
| |
| setTimeout(function() { |
| var animation = new KeyframeEffect(test2_target, |
| reverseTranslateKeyframes, 5000); |
| player2_reattach.source = animation; |
| }, 4000); |
| |
| </script> |
| |
| </body> |
| </html> |
