Transición CSS brusca en el texto de los enlaces de la barra lateral mientras se ejecuta la transición de alternar

Cuando se colapsa, el texto se adapta al ancho de la barra lateral de forma progresiva, lo que causa una transición brusca.

Me gustaría saber si hay algún mecanismo para mostrar el texto solo cuando encaje al 100% en la barra lateral y no se corte en dos líneas.

Lo que necesito es que el texto aparezca solo después de que haya terminado la transición del colapso.

Lo que he intentado:

-Aumentar/disminuir el tiempo de transición (demasiado radical, funciona si elimino la transición pero de alguna manera tiene que ser suave, por lo que no es una solución válida)

.sidebar{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 290px;
background: #193D4C;
z-index: 100;
transition: all 0.5s ease;
}

-Usar la propiedad backface-visibility. No funcionó.

-Usar el tipo de evento shown.bs.collapse de Bootstrap 5 de esta manera:

var myCollapsible = document.getElementById(‘sidebar’)
myCollapsible.addEventListener(‘shown.bs.collapse’, function () {
alert(“¡Funciona!”); //Esto nunca se activa
})

He estado buscando una pregunta similar durante mucho tiempo pero no encontré nada.

davy.ai

July 14, 2023 at 2:44 am

Desafortunadamente, no parece haber una solución directa a tu problema utilizando CSS o Bootstrap. Una posible solución alternativa es utilizar JavaScript para detectar el ancho de la barra lateral después de que haya terminado de colapsar y solo mostrar el texto si se ajusta dentro de ese ancho. Aquí tienes un ejemplo de cómo se podría implementar:

Agrega un ID al elemento de texto que deseas mostrar/ocultar:

<div id="my-text">
  Este es el texto que solo debe mostrar después de que la barra lateral se haya colapsado por completo.
</div>

Utiliza JavaScript para detectar cuándo la barra lateral ha terminado de colapsar y verifica el ancho de la barra lateral y del elemento de texto:

var miColapsable = document.getElementById('sidebar')
var miTexto = document.getElementById('my-text')

miColapsable.addEventListener('shown.bs.collapse', function () {
  // La barra lateral ha terminado de colapsar, comprueba si el texto se ajusta dentro del ancho de la barra lateral
  var anchoBarraLateral = miColapsable.offsetWidth
  var anchoTexto = miTexto.offsetWidth
  if (anchoTexto <= anchoBarraLateral) {
    miTexto.style.display = 'block' // Mostrar el texto
  }
})

Ten en cuenta que también necesitas agregar el atributo hidden al elemento de texto para ocultarlo inicialmente:

<div id="my-text" hidden="">
  Este es el texto que solo debe mostrar después de que la barra lateral se haya colapsado por completo.
</div>

Esta solución no es perfecta ya que todavía depende de un enfoque basado en transiciones, pero te brinda más control sobre cuándo aparece el texto y evita la transición brusca causada por el texto que se adapta al ancho de la barra lateral.

Answer

davy.ai

July 14, 2023 at 2:44 am
Desafortunadamente, no parece haber una solución directa a tu problema utilizando CSS o Bootstrap. Una posible solución alternativa es utilizar JavaScript para detectar el ancho de la barra lateral después de que haya terminado de colapsar y solo mostrar el texto si se ajusta dentro de ese ancho. Aquí tienes un ejemplo de cómo se podría implementar:
1. Agrega un ID al elemento de texto que deseas mostrar/ocultar:
```
<div id="my-text">
  Este es el texto que solo debe mostrar después de que la barra lateral se haya colapsado por completo.
</div>
```
1. Utiliza JavaScript para detectar cuándo la barra lateral ha terminado de colapsar y verifica el ancho de la barra lateral y del elemento de texto:
```
var miColapsable = document.getElementById('sidebar')
var miTexto = document.getElementById('my-text')

miColapsable.addEventListener('shown.bs.collapse', function () {
  // La barra lateral ha terminado de colapsar, comprueba si el texto se ajusta dentro del ancho de la barra lateral
  var anchoBarraLateral = miColapsable.offsetWidth
  var anchoTexto = miTexto.offsetWidth
  if (anchoTexto <= anchoBarraLateral) {
    miTexto.style.display = 'block' // Mostrar el texto
  }
})
```
Ten en cuenta que también necesitas agregar el atributo hidden al elemento de texto para ocultarlo inicialmente:
```
<div id="my-text" hidden="">
  Este es el texto que solo debe mostrar después de que la barra lateral se haya colapsado por completo.
</div>
```
Esta solución no es perfecta ya que todavía depende de un enfoque basado en transiciones, pero te brinda más control sobre cuándo aparece el texto y evita la transición brusca causada por el texto que se adapta al ancho de la barra lateral.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Transición CSS brusca en el texto de los enlaces de la barra lateral mientras se ejecuta la transición de alternar

Answer

davy.ai