Tengo una lista con íconos, cuando se hace clic en los íconos, se revela el texto. Esto funciona, simplemente usando la opacity y alternando una clase. Pero el problema es que si el texto se ajusta a una línea, obtienes espacio entre cada uno de los íconos.
Intenté alternar entre display: none / block que colapsa el espacio ... pero luego el contenido 'salta' a la vista.
¿Hay alguna manera de que una vez que el contenido se muestre con .visible y se desvanezca, la altura también podría animarse suavemente empujando el resto del contenido hacia abajo?
$('.list-numbers--reveal li').click(function() { $(this).toggleClass('visible'); }); .list-numbers { counter-reset: li; line-height: 1.25; list-style: none; } .list-numbers li { display: flex; min-height: 24px; margin-bottom: 12px; position: relative; text-decoration: none; text-shadow: none; } .list-numbers li:before { background: black; border-radius: 100%; color: white; content: counter(li); counter-increment: li; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; height: 24px; line-height: 14px; margin-right: 8px; position: relative; top: -2px; width: 24px; } .list-numbers--reveal li { cursor: pointer; } .list-numbers--reveal li span { opacity: 0; transition: opacity .12s; } .list-numbers--reveal li.visible span { opacity: 1; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <ol class="list-numbers list-numbers--reveal"> <li><span>Lorem</span></li> <li><span>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></li> <li><span>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></li> <li><span>Duis aute irure</span></li> </ol>Para hacer lo que necesita, puede usar la propiedad max-height . Tenga en cuenta que debe usar max-height aquí y no height como height: auto no se puede animar.
Establezca la max-height en una configuración de alrededor de una línea de altura (para evitar un retraso antes de que comience la animación) y configúrelo en un valor mucho mayor que el que tendrá su contenido cuando se aplique la clase.
Aquí hay un ejemplo de trabajo: tenga en cuenta que reduje la velocidad de la animación para que el efecto se notara:
$('.list-numbers--reveal li').click(function() { $(this).toggleClass('visible'); }); .list-numbers { counter-reset: li; line-height: 1.25; list-style: none; } .list-numbers li { display: flex; min-height: 24px; margin-bottom: 12px; position: relative; text-decoration: none; text-shadow: none; } .list-numbers li:before { background: black; border-radius: 100%; color: white; content: counter(li); counter-increment: li; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; height: 24px; line-height: 14px; margin-right: 8px; position: relative; top: -2px; width: 24px; } .list-numbers--reveal li { cursor: pointer; } .list-numbers--reveal li span { opacity: 0; max-height: 25px; display: block; transition: all 1s ease; transition-property: opacity max-height; } .list-numbers--reveal li.visible span { opacity: 1; max-height: 100px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <ol class="list-numbers list-numbers--reveal"> <li><span>Lorem</span></li> <li><span>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></li> <li><span>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></li> <li><span>Duis aute irure</span></li> </ol>Jquery tiene algunos métodos que pueden ayudar con esto, como .slideDown() y .one() (que es un detector de eventos que se ejecuta exactamente una vez).
$('.list-numbers--reveal li').click(function() { const $span = $(this).find('span'); if ($span.hasClass('visible')) { $span.removeClass('visible').one('transitionend', function() { $span.slideUp(); }); } else { $span.slideDown(400, function() { $(this).addClass('visible'); }) } }); .list-numbers { counter-reset: li; line-height: 1.25; list-style: none; } .list-numbers li { display: flex; min-height: 24px; margin-bottom: 12px; position: relative; text-decoration: none; text-shadow: none; } .list-numbers li:before { background: black; border-radius: 100%; color: white; content: counter(li); counter-increment: li; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; height: 24px; line-height: 14px; margin-right: 8px; position: relative; top: -2px; width: 24px; } .list-numbers--reveal li { cursor: pointer; } .list-numbers--reveal li span { display: none; opacity: 0; transition: opacity .12s; } .list-numbers--reveal span.visible { opacity: 1; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <ol class="list-numbers list-numbers--reveal"> <li><span>Lorem</span></li> <li><span>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></li> <li><span>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></li> <li><span>Duis aute irure</span></li> </ol>