Si estoy usando el JS simple a continuación para cambiar una imagen de fondo en un temporizador, ¿puedo aplicar transiciones CSS para hacer que se desvanezcan en lugar de simplemente intercambiar instantáneamente?

var images = new Array(
     '../images/pic1.jpg'
    ,'../images/pic2.jpg'
    ,'../images/pic3.jpg'
);
var i = 0;

function swap() {
    var elm = document.querySelector('.myCSSClass');
    if (i >= images.length) { i = 0 };
    elm.style.backgroundImage = 'url(' + images[i] + ')';
    i += 1;
}

window.onload = setInterval(swap, 2000);

Por ejemplo, estoy intentando en CSS:

.myCSSClass{
      transition: background-image linear 0.3s;
}

Pero no obteniendo ningún resultado. Siento que esto no es posible porque JavaScript simplemente está sobrescribiendo la imagen.

1
jamheadart 30 sep. 2019 a las 17:13

1 respuesta

La mejor respuesta

Simplemente necesita asegurarse de que todas las imágenes estén cargadas inicialmente para tener la transición o cada vez que llame a una nueva imagen obtendrá un cambio abrupto porque se estará cargando O tendrá que esperar un ciclo porque su script cargará el imágenes dentro de ese ciclo.

var images = new Array(
  'https://picsum.photos/id/0/300/300', 
  'https://picsum.photos/id/10/300/300', 
  'https://picsum.photos/id/15/300/300'
);
var i = 0;

function swap() {
  var elm = document.querySelector('.box');
  if (i >= images.length) {
    i = 0
  };
  elm.style.backgroundImage = 'url(' + images[i] + ')';
  i += 1;
}

window.onload = setInterval(swap, 2000);
.box {
  transition: background-image linear 0.5s;
  width: 200px;
  height: 200px;
  background-size: cover;
  
  /* This will force the initial load of all the images*/
  background-image:
    url(https://picsum.photos/id/0/300/300),
    url(https://picsum.photos/id/10/300/300),
    url(https://picsum.photos/id/15/300/300);
}
<div class="box"></div>

En lo anterior, solo tendrá desvanecimiento en algunos navegadores como Chrome. Aquí hay otra idea en la que consideraré otra capa y confiaré en el cambio de opacidad:

var images = new Array(
  'https://picsum.photos/id/0/300/300', 
  'https://picsum.photos/id/10/300/300', 
  'https://picsum.photos/id/15/300/300'
);
var i = 0;

function swap() {
  var elm = document.querySelector('.box');
  if (i >= images.length) {
    i = 0
  };
  elm.style.backgroundImage = 'url(' + images[i] + ')';
  i += 1;
}

window.onload = setInterval(swap, 2000);
.box {
  width: 200px;
  height: 200px;
  background-size: 0 0;
  
  /* This will force the initial load of all the images*/
  background-image:
    url(https://picsum.photos/id/0/300/300),
    url(https://picsum.photos/id/10/300/300),
    url(https://picsum.photos/id/15/300/300);
  position:relative;
  z-index:0;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:inherit;
  background-size:cover;
  animation:op 1s alternate linear infinite 1s;
}

@keyframes op {
   to {
     opacity:0;
   }
}
<div class="box"></div>
2
Temani Afif 1 oct. 2019 a las 09:28