Фоновый переход не работает должным образом - PullRequest
Новая
       39

Фоновый переход не работает должным образом

0 голосов
/ 09 июля 2020

Я собираюсь заменить фоновый элемент в функции setInterval. фон меняется сразу, но я бы хотел, чтобы это произошло за пару секунд. 

var act = true;
setInterval(function(){
  if (act) {
    $("div").addClass("back2")
    $("div").removeClass("back")
    act = false
  } else {
    $("div").addClass("back")
    $("div").removeClass("back2")
    act = true
  }
}, 10000)
.back{
  width:100px;
  height:100px;
  background-image:url("https://www.skoobe.de/static/v/7b2334ac8a86ab5d764bc6e94df87df4aa5b4e2adc78c783e73ae2cbaf613745.jpg");
  display:block;
  transition: .5s ;
}

.back2{
  width:100px;
  height:100px;
  
  background-image:url("https://www.skoobe.de/static/v/a5c0d3825217f88c4c893e7b630c4f1c5eb4c9bec834e1112383614270b5d583.jpg");
  display:block;
  transition: .5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c">tz</div>

Ответы [ 2 ]

1 голос
/ 09 июля 2020

background-image не является анимируемым свойством. Как вы можете видеть в этом списке на странице разработчиков Mozilla, это невозможно: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Что вы можете сделать, так это создать два блока div с одним фоновым изображением, каждый из которых перекрывает друг друга и затем сделайте один из них прозрачным, чтобы создать эффект смешивания.

Я сделал скрипку, чтобы проиллюстрировать идею:

https://jsfiddle.net/Lpduw3mq/

// find elements
var firstDiv = $("#first")
var secondDiv = $("#second")

// Swap backgrounds
var act = true;
setInterval(function(){
  if (act) {
    firstDiv.addClass("transparent")
    secondDiv.removeClass("transparent")
    act = false
  } else {
    firstDiv.removeClass("transparent")
    secondDiv.addClass("transparent")
    act = true
  }
}, 5000)
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.base {
  position: absolute;
  top: 0;
  left: 0;
}

.back {
  width: 100px;
  height: 100px;
  background-image: url("https://www.skoobe.de/static/v/7b2334ac8a86ab5d764bc6e94df87df4aa5b4e2adc78c783e73ae2cbaf613745.jpg");
  display: block;
  opacity: 1;
  transition: opacity 0.5s;
}

.back2 {
  width: 100px;
  height: 100px;
  background-image: url("https://www.skoobe.de/static/v/a5c0d3825217f88c4c893e7b630c4f1c5eb4c9bec834e1112383614270b5d583.jpg");
  display: block;
  opacity: 1;
  transition: opacity 0.5s;
}

.transparent {
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first" class="base back"></div>
<div id="second" class="base back2 transparent"></div>
0 голосов
/ 09 июля 2020

Вы можете использовать неупорядоченный список из двух элементов, абсолютно стилизованных под фон изображения, и использовать анимацию по ключевым кадрам для переключения между этими двумя элементами, плавно изменяя непрозрачность фона. Проверьте это http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

...