CSS转换 - Firefox上的计时问题

时间：2012-06-05 10:49:11

标签： css firefox css3 css-transforms

我制作了一些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，则左侧div与out div同时打开，但在Firefox上它会在不同时间打开，搞乱整个动画。

我该如何解决这个问题？

2 个答案:

答案 0 :(得分：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上进行测试以进行验证。

答案 1 :(得分：0)

我同意arttronics，我看到你测试了所有css3可用的解决方案，但我认为只有2个没有使用css3的可行解决方案

  1. 等到firefox通过css3动画和过渡改进其性能，我个人认为这不会持续这么久
  2. 使用替代方法制作像帆布一样的动画，我认为这并不容易，但我认为这只是一个可行的解决方案，只有你真的需要运行动画
相关问题
最新问题