OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <style> | 2 <style> |
3 a { | 3 a { |
4 text-decoration: none; | 4 text-decoration: none; |
5 } | 5 } |
6 | 6 |
7 .target { | 7 .target { |
8 fill: lime; | 8 fill: lime; |
9 stroke: lime; | 9 stroke: lime; |
10 transition-property: fill, stroke; | 10 transition-property: fill, stroke; |
(...skipping 26 matching lines...) Expand all Loading... |
37 </svg> | 37 </svg> |
38 </a> | 38 </a> |
39 <!-- Visited link paint style transition. --> | 39 <!-- Visited link paint style transition. --> |
40 <a href=""> | 40 <a href=""> |
41 <svg width="100" height="100"> | 41 <svg width="100" height="100"> |
42 <rect class="target" id="rectB" x="2" y="2" stroke-width="2" width="96" heig
ht="96"/> | 42 <rect class="target" id="rectB" x="2" y="2" stroke-width="2" width="96" heig
ht="96"/> |
43 </svg> | 43 </svg> |
44 </a> | 44 </a> |
45 | 45 |
46 <script> | 46 <script> |
| 47 document.getElementsByTagName("a")[1].offsetTop; // Force application of initial
style. |
47 requestAnimationFrame(function() { | 48 requestAnimationFrame(function() { |
48 rectA.classList.add('active'); | 49 rectA.classList.add('active'); |
49 rectB.classList.add('active'); | 50 rectB.classList.add('active'); |
50 }); | 51 }); |
51 </script> | 52 </script> |
OLD | NEW |