jQuery翻转与褪色

Question

我想创建一个翻转动画，将淡出，直到翻转到达翻转动画的中间，并从该点淡入，直到翻转动画结束。 这是我走到这一步，但不是我想实现：

Fiddle Demo

HTML：

<button onclick="flip()">flip the card</button> 
<section class="container"> 
    <div class="card" onclick="flip()"> 
    <div class="front">1</div> 
    <div class="back">2</div> 
    </div> 
</section> 

CSS：

.container { 
    width: 200px; 
    height: 260px; 
    position: relative; 
    border: 1px solid #ccc; 
    -webkit-perspective: 800px; 
    -moz-perspective: 800px; 
    -o-perspective: 800px; 
    perspective: 800px; 
} 
.card { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-transition: -webkit-transform 3s; 
    -moz-transition: -moz-transform 3s; 
    -o-transition: -o-transform 3s; 
    transition: transform 3s; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transform-origin: 50% 50%; 
} 
.card div { 
    display: block; 
    height: 100%; 
    width: 100%; 
    line-height: 260px; 
    color: white; 
    text-align: center; 
    font-weight: bold; 
    font-size: 140px; 
    position: absolute; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 
.card .front { 
    background: red; 
} 
.card .back { 
    background: blue; 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 
.card.flipped { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 

JS：

function flip() { 
    $('.card').toggleClass('flipped').fadeOut(1500).fadeIn(1500); 
} 

有什么建议吗？

Answer 1

您可以使用“transition-timing-function”使用fadeTo（）而不是fadeOut（）和fadeIn（）在jQuery中使用相同速度进行CSS转换。

CSS：

.card { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-transition: -webkit-transform 3s; 
    -moz-transition: -moz-transform 3s; 
    -o-transition: -o-transform 3s; 
    transition: transform 3s; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transform-origin: 50% 50%; 
    -webkit-transition-timing-function: linear; /* Safari and Chrome */ 
    transition-timing-function: linear; 
} 

的JavaScript：

function flip() {  
    $('.card').toggleClass('flipped').fadeTo(1500,0,function(){ $(this).fadeTo(1500,1);}); 
} 

代码段：

function flip() {  
 
    $('.card').toggleClass('flipped').fadeTo(1500,0,function(){ $(this).fadeTo(1500,1);}); 
 
}

.container { 
 
    width: 200px; 
 
    height: 260px; 
 
    position: relative; 
 
    border: 1px solid #ccc; 
 
    -webkit-perspective: 800px; 
 
    -moz-perspective: 800px; 
 
    -o-perspective: 800px; 
 
    perspective: 800px; 
 
} 
 
.card { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    -webkit-transition: -webkit-transform 3s; 
 
    -moz-transition: -moz-transform 3s; 
 
    -o-transition: -o-transform 3s; 
 
    transition: transform 3s; 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    -o-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-transform-origin: 50% 50%; 
 
    -webkit-transition-timing-function: linear; /* Safari and Chrome */ 
 
    transition-timing-function: linear; 
 
} 
 
.card div { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    line-height: 260px; 
 
    color: white; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    font-size: 140px; 
 
    position: absolute; 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    -o-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 
.card .front { 
 
    background: red; 
 
} 
 
.card .back { 
 
    background: blue; 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
    
 
} 
 
.card.flipped { 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg);  
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button onclick="flip()">flip the card</button> 
 
<section class="container"> 
 
    <div class="card" onclick="flip()"> 
 
    <div class="front">1</div> 
 
    <div class="back">2</div> 
 
    </div> 
 
</section>

Answer 2

默认情况下，T他transition-timing-function设置为ease。如果你希望它是linear，您可以添加以下到你的CSS：

transition-timing-function: linear; 

See Fiddle

如果你想保持在ease，你需要计算“中间点”使用ease formula。它达到约25％的中途点。您可以相应地修改时间：

$('.card').toggleClass('flipped').fadeOut(750).fadeIn(2250); 

See Fiddle