4

我制作了一些 CSS 动画，在 WebKit (Safari/Chrome) 上运行良好，但在 Firefox 上时间混乱。

JSFiddle：http: //jsfiddle.net/jmorais/p5XCD/1/

代码：

var open = false;
  var intransition = false;

  function openCard() {
    intransition = true;
    $('.out').addClass('openingOut');
    $('.in-left').addClass('openingIn');
    setTimeout(function() {
        $('.out').css("z-index", "2");
        $('.in-left').css("z-index", "3");
        }, 850);
    setTimeout(function(){
        $('.out').removeClass('openingOut').addClass('outOpen');
        $('.in-left').removeClass('openingIn').addClass('inOpen');
        open = true;
        intransition = false;
        }, 3000);
  }

function closeCard() {
  intransition = true;
  $('.out').addClass('closingOut');
  $('.in-left').addClass('closingIn');

  setTimeout(function() {
      $('.out').css("z-index", "3");
      $('.in-left').css("z-index", "2");
      }, 1000);
  setTimeout(function(){
      $('.out').removeClass('closingOut').removeClass('outOpen');
      $('.in-left').removeClass('closingIn').removeClass('inOpen');
      open = false;
      intransition = false;
      }, 3000);

}

function toggleCard() {

  if (intransition) { return; }

  if (open) {
    closeCard();
  } else {
    openCard();     
  }
}
body {
margin-left: 350px;   
}

.tile {
  position:absolute;
  width:350px;
  height:400px;
  left: 50%;
  margin: 0 auto;
  background: pink;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

.out {
  z-index: 3;
}

.in-left {
  z-index: 2;
  left: -350px;
  -webkit-transform: rotateY(-180deg);
  -webkit-transform-origin: 100% 100%;    
  -moz-transform: rotateY(-180deg);
  -moz-transform-origin: 100% 100%;    
}

.in-right {
  z-index: -1;
}


.content {
    border: 3px black double;   
    margin: 10px;
    padding: 20px;
    height: 335px;
}

.perspective {
  -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    position: relative;
  display: inline-block; 
}

/*****************************************
* Open
******************************************/

.openingOut {
  /* Webkit */
  -webkit-animation-name: open-card-out;
  -webkit-animation-timing-function: ease;
  -webkit-animation-duration: 3s;
  -webkit-transition-delay: 0s;
  -webkit-animation-iteration-count: 1; 
  -webkit-animation-direction: alternate;
  /* Firefox */
  -moz-animation-name: open-card-out;
  -moz-animation-timing-function: ease;
  -moz-animation-duration: 3s;
  -moz-transition-delay: 0s;
  -moz-animation-iteration-count: 1; 
  -moz-animation-direction: alternate;
}

.openingIn {
  /* Webkit */
  -webkit-animation-name: open-card-in;
  -webkit-animation-timing-function: ease;
  -webkit-animation-duration: 3s;
  -webkit-transition-delay: 0s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  /* Firefox */
  -moz-animation-name: open-card-in;
  -moz-animation-timing-function: ease;
  -moz-animation-duration: 3s;
  -moz-transition-delay: 0s;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: alternate;
}

.outOpen {
  -webkit-transform: rotateY(180deg);
  -webkit-transform-origin: 0 0;
  -moz-transform: rotateY(180deg);
  -moz-transform-origin: 0 0;
}

.inOpen {
  -webkit-transform: rotateY(0deg);
  -webkit-transform-origin: 0 0;
  -moz-transform: rotateY(0deg);
  -moz-transform-origin: 0 0;
}

/* Webkit */
@-webkit-keyframes open-card-out {
  from {
    -webkit-transform-origin: left 0%;
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform-origin: left 0%;
    -webkit-transform: rotateY(-180deg);
  }
}


@-webkit-keyframes open-card-in {
  from {
    -webkit-transform-origin: right 0%;
    -webkit-transform: rotateY(180deg);
  }
  to {
    -webkit-transform-origin: right 0%;
    -webkit-transform: rotateY(0deg);
  }
}

/* Firefox */
@-moz-keyframes open-card-out {
  from {
    -moz-transform-origin: left 0%;
    -moz-transform: rotateY(0deg);
  }
  to {
    -moz-transform-origin: left 0%;
    -moz-transform: rotateY(-180deg);
  }
}


@-moz-keyframes open-card-in {
  from {
    -moz-transform-origin: right 0%;
    -moz-transform: rotateY(180deg);
  }
  to {
    -moz-transform-origin: right 0%;
    -moz-transform: rotateY(0deg);
  }
}
/*****************************************
* Close
******************************************/

.closingOut {
  /* Webkit */
  -webkit-animation-name: close-card-in;
  -webkit-animation-timing-function: ease;
  -webkit-animation-duration: 3s;
  -webkit-transition-delay: 0s;
  -webkit-animation-iteration-count: 1; 
  -webkit-animation-direction: alternate;
  /* Firefox */
  -moz-animation-name: close-card-in;
  -moz-animation-timing-function: ease;
  -moz-animation-duration: 3s;
  -moz-transition-delay: 0s;
  -moz-animation-iteration-count: 1; 
  -moz-animation-direction: alternate;
}

.closingIn {
  /* Webkit */
  -webkit-animation-name: close-card-out;
  -webkit-animation-timing-function: ease;
  -webkit-animation-duration: 3s;
  -webkit-transition-delay: 0s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  /* Firefox */
  -moz-animation-name: close-card-out;
  -moz-animation-timing-function: ease;
  -moz-animation-duration: 3s;
  -moz-transition-delay: 0s;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: alternate;
}

@-webkit-keyframes close-card-in {
  from {
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-origin: 0% 0%;
  }
  to {
    -webkit-transform: rotateY(0deg);
    -webkit-transform-origin: 0% 0%;
  }
}

@-webkit-keyframes close-card-out {
  from {
    -webkit-transform-origin: right 0%;
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform-origin: right 0%;
    -webkit-transform: rotateY(180deg);
  }
}

@-moz-keyframes close-card-in {
  from {
    -moz-transform: rotateY(-180deg);
    -moz-transform-origin: 0% 0%;
  }
  to {
    -moz-transform: rotateY(0deg);
    -moz-transform-origin: 0% 0%;
  }
}

@-moz-keyframes close-card-out {
  from {
    -moz-transform-origin: right 0%;
    -moz-transform: rotateY(0deg);
  }
  to {
    -moz-transform-origin: right 0%;
    -moz-transform: rotateY(180deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="perspective"  onclick="toggleCard();">
      <div class="tile out out">
        <div class="content">
            <p>out</p>
        </div>
      </div>
      <div class="tile in-left">
        <div class="content"> 
            <p>in-left</p>            
        </div>
      </div>
      <div class="tile in-right">
        <div class="content">
          <div style="display: table; height: 100%; width: 100%;">
              <p>in-right</p>
        </div>
        </div>
      </div>
    </div>

如您所见，如果您使用的是 Safari/Chrome，in-left div 与 out div 同时打开，但在 Firefox 上它将在不同时间打开，从而打乱了整个动画。

我怎样才能解决这个问题？

4

2 回答 2

5

不需要答案，因为两个浏览器中的动画效果是相同的，经过稳定的构建测试。

铬合金：

19.0.1084.56 (Official Build 140965) m


火狐：

Mozilla/5.0 (Windows NT 5.1; rv:13.0) Gecko/20100101 Firefox/13.0

这种不回答是多么讽刺的回答。

可以肯定的是，清除浏览器缓存并在另一台 PC 上进行测试以进行验证。

于 2012-06-12T03:01:19.253 回答
0

我同意 arttronics，我看到您测试了所有可用的 css3 解决方案，但我认为只有 2 个可能的解决方案根本不使用 css3

  1. 等firefox用css3动画和transition提高性能吧，我个人认为不会持续这么久
  2. 使用替代方法来制作像画布一样的动画，我认为这并不容易，但我认为只有当你真的需要动画运行时，这才是一个可行的解决方案
于 2012-06-14T14:40:45.787 回答