div 在无限循环中只翻转一次 jquery

Question

我在 table 中有一个 div 项，我在 JS 中旋转 div 并且我重复调用该函数，但是翻转仅在第一次发生时发生函数被执行，当函数被调用时它再次显示 div，而不翻转 div.

我需要的是，当我每次调用函数时，div 应该翻转 div。

我该怎么做？

Css:

.box-1{
    transform: rotateY(180deg);
    display:none;
}

JQuery:

function startSlidecat1(started) {
  for (var i = 0; i < footwear.length; i++) {
    var image = footwear[i][0];
    imgslidercat1(image, i * 2100, i == footwear.length - 1);
  }
};

function imgslidercat1(image, timeout, last) {
  window.setTimeout(function() {
    document.getElementById('flip-1').style.display = 'none';
    document.getElementById('category-1').style.display = 'block';
    document.getElementById('category-1').innerHTML = "";
    var product = document.getElementById('category-1');
    var elem = document.createElement("img");
    product.appendChild(elem);
    elem.src = image;
    if (last) {
      flip();
    }
  }, timeout);
}
startSlidecat1();

function flip(){
    $('#category-1').delay(100).css('display', 'none');
    $('.box-1').delay(100).css('display', 'block');
    $('.box-1').transition({
        perspective: '100px',
        rotateY: '360deg'
      },200)  
    setTimeout(startSlidecat1, 2000);
  }

Answer 1

第一次div翻转时，其rotateY值由180deg变为360deg，可见。但是从第二次开始，它的值保持在 360deg 所以什么也没有发生。你只需要在每次调用函数时重新设置值，

$('.box-1').css({transform:'perspective(100px) rotateY(180deg)'});

您可以像这样将其包含在 startSlidecat1 函数中，

function startSlidecat1(started) {
  $('.box-1').css({transform:'perspective(100px) rotateY(180deg)'});
  for (var i = 0; i < footwear.length; i++) {
    var image = footwear[i][0];
    imgslidercat1(image, i * 2100, i == footwear.length - 1);
  }
};

div 在无限循环中只翻转一次 jquery

div flips only one time in infinite loop jquery

javascript

css

jquery

css-transitions