Question

我试图将一个图像旋转到另一个图像，每次从阵列中选择一个新的图像源。

我在应用类来执行转换之前更新了背面图像的src。但是图像在转换之后才会改变。因此，您实际上看到旧图像旋转，然后在转换完成后切换到新图像。

这将用于图像网格，但已经拆分为单个项目。
见codepen： https://codepen.io/designseeds/pen/WywNjj

＆＃13;

//Array of available images
var imageArray = ["https://picsum.photos/300/300?image=0", "https://picsum.photos/300/300?image=10", "https://picsum.photos/300/300?image=20", "https://picsum.photos/300/300?image=30", "https://picsum.photos/300/300?image=40", "https://picsum.photos/300/300?image=50", "https://picsum.photos/300/300?image=60", "https://picsum.photos/300/300?image=70", "https://picsum.photos/300/300?image=80", "https://picsum.photos/300/300?image=90", "https://picsum.photos/300/300?image=100", "https://picsum.photos/300/300?image=110"]

//The gallery
var galleryContainer = $('#gallery');

//How many items
const itemsTotal = 1;

var i;
for (i = 0; i < itemsTotal; i++) {
    let src = imageArray[0];
    galleryContainer.prepend(`<div class="card">
    <img class="front" src="${src}">
    <img class="back" src="${src}">
  </div>`);
    imageArray.splice(0, 1);
}
//Get reference to gallery images
var galleryCards = $('#gallery .card');


//The item in the array to replace the src with
var nextImage = 0;
//Reference to the element that will be transitioned
var currentImage = 0;

function init() {
    randomImg();
}

function imageSetup() {
    var card = galleryCards.eq(currentImage);
    var cardFront = card.find('.front');
    var cardBack = card.find('.back');

    if (card.hasClass('is-flipped')) {
        var replaceImg = cardFront;
        var currentImgSrc = cardBack.attr('src');
    } else {
        var replaceImg = cardBack;
        var currentImgSrc = cardFront.attr('src');
    }

    //Src for new image
    var newImg = imageArray[nextImage];

    //Remove image from array and replace with removed image
    imageArray.splice(nextImage, 1, currentImgSrc);

    replaceImg.attr('src', newImg);


    setTimeout(imageRotate, 4000);
}

function imageRotate(card) {

    var card = galleryCards.eq(currentImage);
    card.toggleClass('is-flipped');

    //Added this timeout to be sure the css transition has finisehd before starting again
    setTimeout(randomImg, 4000);
    //randomImg();
}

function randomImg() {

    currentImage = Math.floor((Math.random() * itemsTotal));
    nextImage = Math.floor((Math.random() * imageArray.length));
    currentImage = 0;

    imageSetup();
}

＆＃13;

#gallery {
  max-width:400px;
  display:flex;
  flex-wrap:wrap;
  perspective: 600px;
 
}
#gallery .card {
  width:calc(100%/3);
  position:relative;
  padding-bottom:calc(100%/3);
  
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card img {
  transition: transform 1s;
  top:0;
  left:0;
  max-width:100%;
  position:absolute;
  backface-visibility: hidden;
}

img.back {
  transform: rotateY( 180deg );
}

.card.is-flipped {
  transform: rotateY(180deg);
}

#images {
/*   display:none; */
}
#images img{
  width:20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Gallery</h4>
<button onclick="init()">Click me</button>
<div id="gallery">
</div>
<!--ADD this for testing to be sure images have loaded.-->
<div id="images"><img src="https://picsum.photos/300/300?image=0">
    <img src="https://picsum.photos/300/300?image=10">
    <img src="https://picsum.photos/300/300?image=20">
    <img src="https://picsum.photos/300/300?image=30">
    <img src="https://picsum.photos/300/300?image=40">
    <img src="https://picsum.photos/300/300?image=50">
    <img src="https://picsum.photos/300/300?image=60">
    <img src="https://picsum.photos/300/300?image=70">
    <img src="https://picsum.photos/300/300?image=80">
    <img src="https://picsum.photos/300/300?image=90">
    <img src="https://picsum.photos/300/300?image=100">
    <img src="https://picsum.photos/300/300?image=110"></div>

＆＃13;

我猜测，由于图片不在视线范围内，浏览器无法接收更改，然后等待转换结束。

这是Chrome 66和Safari 11中的一个问题。这是我得到的问题的快速截屏视频。 Screencast of issue

CSS rotateY update img src在转换完成之前不可见

0 个答案: