Как вставить CSS анимацию поворота трансформации в слайд-шоу JS fadein и fadeout? - PullRequest
Новая
       20

Как вставить CSS анимацию поворота трансформации в слайд-шоу JS fadein и fadeout?

0 голосов
/ 29 мая 2019

У меня есть идея, но я не могу ее применить, потому что я не очень знаком с Javascript.Моя проблема в том, что у меня есть JS-скрипт для слайд-шоу fadein и fadeout, однако, было бы неплохо иметь поворот страницы во время перехода.У меня есть стиль наведения CSS для этого [.card: hover .card__side - front {transform: rotateY (-180deg);}] но я не знаю, как интегрировать это в сценарий JS.Вот JS-скрипт слайд-шоу: 

<script>
  $("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(3000)
    .next()
    .fadeIn(3000)
    .end()
    .appendTo('#slideshow')
;
    ;
},  30000);
</script>

1 Ответ

0 голосов
/ 29 мая 2019

Вы можете попробовать как, 

var imgDuration = 3000;

function slideShow() {
    document.getElementById('slider').className += "fadeOut";
    setTimeout(function() {
        document.getElementById('slider').className = "";
    },1000);
    setTimeout(slideShow, imgDuration);
}
slideShow();
#slider {
    width:100px;
    height:70px;
    opacity:1;
    transition: all 1s; 
}

#slider.fadeOut {
    opacity:0;
    transform: rotate(1800deg);
}
<img id="slider" src="http://pngriver.com/wp-content/uploads/2018/03/Download-Batman-Fidget-Spinner-PNG-Transparent-058.png">

Я изменил код из следующей ссылки,

СПРАВКА: http://jsfiddle.net/pdb4kb1a/2/

...