animation 中的重复内容阅读更多/更少

Question

I am putting in place this principle of truncation on my site: Truncate text (more/less).

It works perfectly, but the animation bothers me. Indeed when I click on "less", I have the impression that he gives me the text before being reduced as originally. I added the titles "TESST" to check what I saw and it really does.

 $(document).ready(function() { (function() { var showChar = 400; var ellipsestext = "..."; $(".truncate").each(function() { var content = $(this).html(); if (content.length > showChar) { var c = content.substr(0, showChar); var h = content; var html = '<div class="truncate-text" style="display:block">' + c + '<span class="moreellipses">' + ellipsestext + '&nbsp;&nbsp;<a href="" class="moreless more">more</a></span></span></div><div class="truncate-text" style="display:none">' + h + '<a href="" class="moreless less">Less</a></span></div>'; $(this).html(html); } }); $(".moreless").click(function() { var thisEl = $(this); var cT = thisEl.closest(".truncate-text"); var tX = ".truncate-text"; if (thisEl.hasClass("less")) { cT.prev(tX).toggle(); cT.slideToggle(); } else { cT.toggle(); cT.next(tX).fadeToggle(); } return false; }); /* end iffe */ })(); /* end ready */ });

 html{overflow-y:scroll} /* this part is not needed for demo but hides page while js is working */ /* its a bit hit and miss but may be useful to disguise jump when text is initially truncated */ body{animation: fadeIn 1s} @keyframes fadeIn{ 0%{opacity:0;background:#000} 90%{opacity:0} 100%{opacity:1;background:#fff} }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Truncate text</h1> <section> <h2>Section 1</h2> <div class="truncate"> <h2>TESST 1</h2> <h2>TESST 2</h2> <p>Consciousness, explorations from which we spring star stuff harvesting star light shores of the cosmic ocean Apollonius of Perga permanence of the stars, Tunguska event paroxysm of global death white dwarf the carbon in our apple pies tendrils of gossamer clouds white dwarf not a sunrise but a galaxyrise. Brain is the seed of intelligence extraordinary claims require extraordinary evidence stirred by starlight, vanquish the impossible colonies quasar shores of the cosmic ocean Euclid dream of the mind's eye something incredible is waiting to be known rings of Uranus explorations the only home we've ever known.</p> <p>Galaxies tesseract cosmos inconspicuous motes of rock and gas Hypatia tesseract corpus callosum tingling of the spine astonishment extraordinary claims require extraordinary evidence. Citizens of distant epochs galaxies, Tunguska event intelligent beings dream of the mind's eye, Rig Veda culture. Billions upon billions with pretty stories for which there's little good evidence light years? Hydrogen atoms, venture, birth Hypatia tingling of the spine birth, muse about. Kindling the energy hidden in matter. Vanquish the impossible,</p> <p>Hearts of the stars emerged into consciousness, extraplanetary as a patch of light citizens of distant epochs, finite but unbounded. kindling the energy hidden in matter dream of the mind's eye take root and flourish ship of the imagination another world, Light years, descended from astronomers tingling of the spine, a mote of dust suspended in a sunbeam star stuff harvesting star light colonies courage of our questions hundreds of thousands of brilliant syntheses, hydrogen atoms hearts of the stars muse about corpus callosum cosmos. Galaxies vastness is bearable only through love dispassionate extraterrestrial observer of brilliant syntheses muse about the carbon in our apple pies, brain is the seed of intelligence courage of our questions?</p> <p>Star stuff harvesting star light, Tesseract not a sunrise but a galaxyrise descended from astronomers worldlets rogue concept of the number one Cambrian explosion. Rogue astonishment science. Sea of Tranquility, concept of the number one corpus callosum? A billion trillion the ash of stellar alchemy gathered by gravity, vanquish the impossible light years rogue. Extraordinary claims require extraordinary evidence rich in heavy atoms two ghostly white figures in coveralls and helmets are soflty dancing take root and flourish intelligent beings and billions upon billions upon billions upon billions upon billions upon billions upon billions. (end section 1)</p> </div> </section>

Would there be a way to make the animation more fluid without the text duplicating before?

in my opinion it is due to this line: cT.prev (tX).toggle ();

Thank you for your answers

Answer 1

The above code simply adds truncated or less content just before original or more content. Thats why you see duplicity. You can improve the animation by stacking both truncated and original content on top of each other. You can achieve that using simple css. This way, even though DOM will have duplicate content, user can't see them.

This is the css you need to add.

.truncate {
 position: relative;
}

.truncate-text {
position: absolute;
}

This is the working example.

 $(document).ready(function() { (function() { var showChar = 400; var ellipsestext = "..."; $(".truncate").each(function() { var content = $(this).html(); if (content.length > showChar) { var c = content.substr(0, showChar); var h = content; var html = '<div class="truncate-text" style="display:block">' + c + '<span class="moreellipses">' + ellipsestext + '&nbsp;&nbsp;<a href="" class="moreless more">more</a></span></span></div><div class="truncate-text" style="display:none">' + h + '<a href="" class="moreless less">Less</a></span></div>'; $(this).html(html); } }); $(".moreless").click(function() { var thisEl = $(this); var cT = thisEl.closest(".truncate-text"); var tX = ".truncate-text"; if (thisEl.hasClass("less")) { cT.prev(tX).toggle(); cT.slideToggle(); } else { cT.toggle(); cT.next(tX).fadeToggle(); } return false; }); /* end iffe */ })(); /* end ready */ });

 html{overflow-y:scroll} /* this part is not needed for demo but hides page while js is working */ /* its a bit hit and miss but may be useful to disguise jump when text is initially truncated */ body{animation: fadeIn 1s} @keyframes fadeIn{ 0%{opacity:0;background:#000} 90%{opacity:0} 100%{opacity:1;background:#fff} } //Minor change in CSS.truncate { position: relative; }.truncate-text { position: absolute; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Truncate text</h1> <section> <h2>Section 1</h2> <div class="truncate"> <h2>TESST 1</h2> <h2>TESST 2</h2> <p>Consciousness, explorations from which we spring star stuff harvesting star light shores of the cosmic ocean Apollonius of Perga permanence of the stars, Tunguska event paroxysm of global death white dwarf the carbon in our apple pies tendrils of gossamer clouds white dwarf not a sunrise but a galaxyrise. Brain is the seed of intelligence extraordinary claims require extraordinary evidence stirred by starlight, vanquish the impossible colonies quasar shores of the cosmic ocean Euclid dream of the mind's eye something incredible is waiting to be known rings of Uranus explorations the only home we've ever known.</p> <p>Galaxies tesseract cosmos inconspicuous motes of rock and gas Hypatia tesseract corpus callosum tingling of the spine astonishment extraordinary claims require extraordinary evidence. Citizens of distant epochs galaxies, Tunguska event intelligent beings dream of the mind's eye, Rig Veda culture. Billions upon billions with pretty stories for which there's little good evidence light years? Hydrogen atoms, venture, birth Hypatia tingling of the spine birth, muse about. Kindling the energy hidden in matter. Vanquish the impossible,</p> <p>Hearts of the stars emerged into consciousness, extraplanetary as a patch of light citizens of distant epochs, finite but unbounded. kindling the energy hidden in matter dream of the mind's eye take root and flourish ship of the imagination another world, Light years, descended from astronomers tingling of the spine, a mote of dust suspended in a sunbeam star stuff harvesting star light colonies courage of our questions hundreds of thousands of brilliant syntheses, hydrogen atoms hearts of the stars muse about corpus callosum cosmos. Galaxies vastness is bearable only through love dispassionate extraterrestrial observer of brilliant syntheses muse about the carbon in our apple pies, brain is the seed of intelligence courage of our questions?</p> <p>Star stuff harvesting star light, Tesseract not a sunrise but a galaxyrise descended from astronomers worldlets rogue concept of the number one Cambrian explosion. Rogue astonishment science. Sea of Tranquility, concept of the number one corpus callosum? A billion trillion the ash of stellar alchemy gathered by gravity, vanquish the impossible light years rogue. Extraordinary claims require extraordinary evidence rich in heavy atoms two ghostly white figures in coveralls and helmets are soflty dancing take root and flourish intelligent beings and billions upon billions upon billions upon billions upon billions upon billions upon billions. (end section 1)</p> </div> </section>