Imagen de fundido de entrada usando JavaScript

1. Use la propiedad className para aparecer en la imagen
2. Use el método requestAnimationFrame() para la imagen de aparición gradual

Sin JavaScript, el estilo de aparición gradual de una imagen se puede evaluar con CSS. Pero el proceso no es confiable ya que no podemos manejarlo dinámicamente.

Por lo tanto, la forma JavaScript de jugar con el método requestAnimationFrame() en lugar de depender completamente de CSS y el método setTimeout() hace que la ruta sea más rápida y rápida. En el segmento de ejemplo, veremos una instancia de código que incluye la implementación del método requestAnimationFrame() y un código que puede desvanecerse en las imágenes que hacen referencia a la propiedad className.

Use la propiedad className para aparecer en la imagen

Generaremos una etiqueta img con un src viable. Hay un evento en el que se puede hacer clic para iniciar el fundido de entrada de la imagen. El trabajo principal aquí es con la propiedad className que se referirá a un determinado bloque CSS y lo alineará con la instancia img id.

Código - Archivo HTML:

<img id="img" style="width: 200px" src="https://images.unsplash.com/photo-1653450283266-c788c2ca4ab2?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872" alt="Image 1">
<br><br>
<button type="button" onclick="myFunction()">Change</button>

Código - Archivo CSS:

img {
            opacity: 0;
            filter: alpha(opacity=40);
    }
.animation {
            -webkit-transition: 1s;
            -moz-transition: 1s;
            -o-transition: 1s;
            transition: 1s;
            opacity: 1;
        }

Código - Archivo JavaScript:

function myFunction() {
  document.getElementById('img').className = 'animation';
}

Producción:

Use el método requestAnimationFrame() para la imagen de aparición gradual

En este sentido, tendremos una función fadeIn que tomará la instancia de la etiqueta img. Más tarde, la función fadeIn operará en requestAnimationFrame() y setTimeout(), y se ubicará un marco de tiempo basado en el detalle actual del navegador.

Código - Archivo HTML:

<img id="what" src="https://images.unsplash.com/photo-1653372500616-ff0a2847f7ca?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774" draggable="true" ondragstart="drag(event)" width="200" height="150">
<br><br>
<button onclick="myFunction()">Change</button>

Código - Archivo CSS:

img {
    opacity: 0;
    filter: alpha(opacity=40);
}

Código - Archivo JavaScript:

function fadeIn(el) {
  el.style.opacity = 0;
  var tick = function() {
    el.style.opacity = +el.style.opacity + 0.05;
    if (+el.style.opacity < 1) {
      var x = (window.requestAnimationFrame && requestAnimationFrame(tick)) ||
          setTimeout(tick, 16)
    }
  };
  tick();
}

function myFunction() {
  var el = document.getElementById('what');
  console.log(el);
  fadeIn(el);
}

Producción: