Soy bastante nuevo en CSS y javascript. Durante las últimas 3 horas he estado tratando de agregar una transición a este código. Es una función 'Leer más'.
Espero que no solo alguien pueda finalmente ayudarme a agregarle la transición, sino que también pueda aprender algo sobre CSS y javascript :)
function readMore(nr) { let dots = document.querySelector(`.card[data-nr="${nr}"] .dots`); let moreText = document.querySelector(`.card[data-nr="${nr}"] .more`); let btnText = document.querySelector(`.card[data-nr="${nr}"] .myBtn`); if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Read more"; moreText.style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "Read more"; moreText.style.display = "inline"; } } .myBtn { background-color: transparent!important; color: #000000; border: none; font-family: Arial; cursor: pointer; font-size: 30px; text-align: center; } <html> <body> <div class="card" data-nr="1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna <span class="dots">...</span><span class="more" style="display: none;"> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat./span></p> <button onclick="readMore('1')" class="myBtn">Read more</button> </div> </html> </body>Intenté agregar .card {transition: max-height 0.7s;} al CSS.
Hay muchas opciones no "geniales" o simples para esto. Si usa una biblioteca/marco como jquery o bootstrap, ofrecen utilidades para administrar las transiciones de tamaño deslizante por usted.
Esto se debe a que para hacerlo bien, debe usar js para calcular y ajustar los valores de altura.
Una forma menos robusta es hacerlo con altura máxima y una transición. El truco es que no puedes pasar de algo como display:none; o visibilidad: oculto;
function readMore(nr) { let p = document.querySelector(`.card[data-nr="${nr}"] p`); let btnText = document.querySelector(`.card[data-nr="${nr}"] .myBtn`); if (!p.classList.contains('collapse')) { p.classList.add('collapse'); btnText.innerHTML = "Read more"; } else { p.classList.remove('collapse'); btnText.innerHTML = "Read more"; } } .myBtn { background-color: transparent!important; color: #000000; border: none; font-family: Arial; cursor: pointer; font-size: 30px; text-align: center; } p { overflow: hidden; transition: max-height 0.7s; max-height: 100px; } p.collapse { max-height: 30px; } <html> <body> <div class="card" style="margin-top: 50px;" data-nr="1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <button onclick="readMore('1')" class="myBtn">Read more</button> </div> </html> </body>