Question

我有一个主意，但由于我对Java语言不是很熟悉，所以无法应用。我的问题是我有一个用于淡入和淡出幻灯片显示的JS脚本，但是，在过渡期间进行页面旋转似乎很好。我有一个CSS悬停样式可以做到这一点[.card：hover .card__side--front {transform：rotationY（-180deg）; }]，但我不知道如何将其集成到JS脚本中。这是幻灯片的JS脚本：

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

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

Answer 1

您可以尝试一下，

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/

如何在JS淡入和淡出幻灯片中插入CSS变形旋转动画？

1 个答案: