您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

test-auto-animate.html 4.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>reveal.js - Test Auto-Animate</title>
  6. <link rel="stylesheet" href="../dist/reveal.css">
  7. <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
  8. <script src="../node_modules/qunit/qunit/qunit.js"></script>
  9. </head>
  10. <body style="overflow: auto;">
  11. <div id="qunit"></div>
  12. <div id="qunit-fixture"></div>
  13. <div class="reveal">
  14. <div class="slides">
  15. <section data-auto-animate>
  16. <h1>h1</h1>
  17. <h2>h2</h2>
  18. <h3 style="position: absolute; left: 0;">h3</h3>
  19. </section>
  20. <section data-auto-animate>
  21. <h1 data-auto-animate-duration="0.1">h1</h1>
  22. <h2 style="opacity: 0;">h2</h2>
  23. <h3 style="position: absolute; left: 100px;">h3</h3>
  24. </section>
  25. <section data-auto-animate data-auto-animate-duration="0.1">
  26. <h1>h1</h1>
  27. <h2>h2</h2>
  28. <h3>h3</h3>
  29. </section>
  30. <section>
  31. <h1>Non-auto-animate slide</h1>
  32. </section>
  33. <section data-auto-animate>
  34. <h1 class="fragment">h1</h1>
  35. <h2 class="fragment">h2</h2>
  36. <h3>h3</h3>
  37. </section>
  38. <section data-auto-animate>
  39. <h1 class="fragment">h1</h1>
  40. <h2 class="fragment">h2</h2>
  41. <h3 class="fragment">h3</h3>
  42. </section>
  43. <section>
  44. <h1>Non-auto-animate slide</h1>
  45. </section>
  46. </div>
  47. </div>
  48. <script src="../dist/reveal.js"></script>
  49. <script>
  50. QUnit.config.testTimeout = 30000;
  51. QUnit.config.reorder = false;
  52. const slides = Array.prototype.map.call( document.querySelectorAll( '.slides section' ), slide => {
  53. return {
  54. slide: slide,
  55. h1: slide.querySelector( 'h1' ),
  56. h2: slide.querySelector( 'h2' ),
  57. h3: slide.querySelector( 'h3' )
  58. };
  59. } );
  60. Reveal.initialize().then( async () => {
  61. QUnit.module( 'Auto-Animate' );
  62. QUnit.test( 'Adds data-auto-animate-target', assert => {
  63. Reveal.slide(1);
  64. assert.strictEqual( slides[0].h1.getAttribute( 'data-auto-animate-target' ), '', 'From elements have blank data-auto-animate-target' );
  65. assert.ok( slides[1].h1.getAttribute( 'data-auto-animate-target' ).length > 0, 'To elements have a data-auto-animate-target value' );
  66. });
  67. QUnit.test( 'Ends on correct target styles', assert => {
  68. Reveal.slide(1);
  69. assert.strictEqual( slides[1].h2.style.opacity, "0" );
  70. assert.strictEqual( slides[1].h3.offsetLeft, 100 );
  71. });
  72. QUnit.test( 'Does not add [data-auto-animate] on non auto-animated slides', assert => {
  73. Reveal.slide(2);
  74. Reveal.next();
  75. assert.ok( slides[3].slide.hasAttribute( 'data-auto-animate' ) === false )
  76. });
  77. QUnit.test( 'autoAnimate config option', assert => {
  78. Reveal.configure({ autoAnimate: false });
  79. assert.ok( document.querySelectorAll( 'data-auto-animate-target' ).length === 0, 'Removes all [data-auto-animate-target]' )
  80. assert.ok( Array.prototype.every.call( document.querySelectorAll( 'section[data-auto-animate]' ), el => {
  81. return el.dataset.autoAnimate === '';
  82. }, 'All data-auto-animate attributes are reset' ) );
  83. Reveal.configure({ autoAnimate: true });
  84. });
  85. QUnit.test( 'Carries forward matching fragment visibility', assert => {
  86. Reveal.slide(4);
  87. assert.ok( !slides[5].h1.classList.contains( 'visible' ) )
  88. Reveal.next();
  89. Reveal.next();
  90. Reveal.next();
  91. assert.ok( slides[5].h1.classList.contains( 'visible' ) )
  92. assert.ok( slides[5].h2.classList.contains( 'visible' ) )
  93. assert.ok( !slides[5].h3.classList.contains( 'visible' ) )
  94. Reveal.next();
  95. assert.ok( slides[5].h3.classList.contains( 'visible' ) )
  96. Reveal.next();
  97. assert.ok( slides[6].slide === Reveal.getCurrentSlide() )
  98. });
  99. QUnit.test( 'Slide specific data-auto-animate-duration', assert => {
  100. assert.timeout( 400 );
  101. assert.expect( 1 );
  102. return new Promise( resolve => {
  103. let callback = () => {
  104. slides[2].h3.removeEventListener( 'transitionend', callback );
  105. assert.ok( true, 'Transition ended within time window' );
  106. resolve();
  107. }
  108. Reveal.slide(1);
  109. Reveal.slide(2);
  110. slides[2].h3.addEventListener( 'transitionend', callback );
  111. } );
  112. });
  113. // QUnit.test( 'Element specific data-auto-animate-duration', assert => {
  114. // assert.timeout( 400 );
  115. // assert.expect( 1 );
  116. // return new Promise( resolve => {
  117. // let callback = () => {
  118. // slides[1].h1.removeEventListener( 'transitionend', callback );
  119. // assert.ok( true, 'Transition ended within time window' );
  120. // resolve()
  121. // }
  122. // Reveal.slide(1);
  123. // slides[1].h1.addEventListener( 'transitionend', callback );
  124. // } );
  125. // });
  126. } );
  127. </script>
  128. </body>
  129. </html>