5

function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("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 less";
    moreText.style.display = "inline";
  }
}
#more {display: none;}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>

<button onclick="myFunction()" id="myBtn">Read more</button>

Siguiendo el ejemplo de https://www.w3schools.com/howto/howto_js_read_more.asp pude agregar un botón para mostrar y ocultar información. El problema es que la transición se hace muy de repente y necesito que sea más suave.

5 respuestas 5

3

Otra solución, modifica tu código pero es más suave. Se base en modificar la altura del bloque donde está el texto a mostrar. Se cambia desde la altura mínima a una altura máxima con un transition. Cuando acaba la transición se llama al menjador del evento que es donde se quitan los puntos y se cambia el cartel del botón. El texto del botón es lo que uso como testigo de que está abriendo o cerrando.

//Iniciar las alturas máxima y mínima del bloque contenedor.
//mínima es con el texto oculto, máxima con el texto visible.
var caja = document.getElementById("caja");
var moreText = document.getElementById("more");
caja.max = caja.offsetHeight + 'px';
moreText.style.display = 'none';
caja.min = caja.offsetHeight + 'px';
caja.style.height = caja.min;
caja.style.transition = "height 1500ms";
//Esta función cambia la altura y oculta los botones si está abriendo
//y muestra el texto completo
function toggle() {
  var dots = document.getElementById("dots");
  if (caja.style.height != caja.min && caja.style.height != '') {
    caja.style.height = caja.min;
  } else {
    dots.style.display = "none";
    caja.style.height = caja.max;
    moreText.style.display = "inline";
  }
}

//Función para el evento fin de transición 
function cambiarAlto() {
  var dots = document.getElementById("dots");
  var btnText = document.getElementById("myBtn");
  //Si está cerrando el botón pone Read less  
  //Tb se puede comprobar con la altura de caja.
  if (btnText.innerHTML == "Read less") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}
//asigna el evento, por esto debe estar al final
document.getElementById("caja").addEventListener("transitionend", cambiarAlto, false);
@charset "utf-8";
#more {
  display: inline;
}

#caja {
  overflow: hidden;
}
<div id="caja" style="width:600px">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
</div>
<button onclick="toggle()" id="myBtn">Read more</button>

Es una solución, vale para aprender un poco sobre transiciones y eventos. Podría haber otra solución sin tocar transiciones.
Vete estudiando esto :)

3

Utiliza transacciones CSS para lograr un efecto de suavidad, al mostrar el texto. La propiedad display de CSS no se puede animar con transition, pero puedes hacer esto

function show() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.opacity = 0

    setTimeout(function() {
      moreText.style.display = "none";
    }, 350)
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read more";
    moreText.style.display = "inline";

    setTimeout(function() {
      moreText.style.opacity = 1
    }, 350)
  }
}
#more {
  display: none;
  transition: opacity .35s;
  opacity: 0
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>

<button onclick="show()" id="myBtn">Read more</button>

Solo cambie el nombre de la función, pero puedes usar el que tienes. Lo que hago es: retardo el cambio en la propiedad display y animó alterando la propiedad opacity del texto

2

Puedes usar la propiedad transform, específicamente con su valor scale, el cual escala los elementos

function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.transform = "scale(0)";
    setTimeout(() => {
      moreText.style.display = "none";
      // 300, 0.3s -> Duración de la animación
    }, 300);
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline-block";
    // Inline-block para que se aplique el transform
    setTimeout(() => {
      moreText.style.transform = "scale(1)";
    });
  }
}
#more {display: none;transform:scale(0);transition:0.3s;transform-origin:left;}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>

<button onclick="myFunction()" id="myBtn">Read more</button>

Obviamente, se necesita la propiedad transition para ver la animación, otra cosa por aclarar es que la propiedad transform-origin es el lado de origen de la animación, como el texto está a la izquierda, el valor de la propiedad debería ser left

2

No es una respuesta a tu pregunta, pero has probado con las etiquetas summary y details de HTML5? Tienen un efecto parecido pero te ahorras todo el código Javascript. Te paso un ejemplo por si quieres tenerlo en consideración.

::marker {
    color: red;
  }

summary,details{
  width: 250px;
  cursor: pointer;
  background: #eee;
}

details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}

@keyframes sweep {
  0%    {opacity: 0; transform: translateX(-10px)}
  100%  {opacity: 1; transform: translateX(0)}
}

summary::marker {
    content: '\002B'' '; /* Plus symbol with space */
    font-size: 1.5em;
  }
  
details[open] summary::marker {
    content: '\2212'' '; /* Minus symbol with space */
  }
<h1>Lorem impum</h1>
    <details>
        <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi 
          lorem egestas vitae scel</summary>
        <span>erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. 
          Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. 
          In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. 
          Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
        </span>
      </details>

0

Si haces un wrapper con position relative y overflow hidden, pones el texto a añadir con un transform translate + o - 100% y en la función devuelves el translate a 0 o a la posición que desees

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.