Question

我想从animate.css拍摄的这个动画显示一个有两个不同侧面而不是同一个硬币的硬币。我将代码的相关部分粘贴到这个小提琴： jsFiddle Link

HTML代码：

<div id="coin-flip">
        <button id="btnFlip">Flip the Coin</button></br></br></br>
        <div id="coin-flip-cont">
            <div id="coin"></div>
        </div></br></br></br>
        <h2 id="result"></h2>
 </div>

Javascript，jQuery代码：

$(function() {
        var coin = {
            sideOne: "./img/image1.png",
            sideTwo: "./img/image2.png"
        }

        $("#btnFlip").click(function() {
            $("#coin").html(`<img class="animated flip"src="${coin[result]}" width="200" length="200"/>`);
        });
});

CSS来自Animate.css，您可以在小提琴中查看。

基本上我想要的结果是硬币翻转显示不同的边并着陆在我的其余代码设置的那一边。

编辑：只是添加这个作为我想要实现的目标的一个例子http://codepen.io/html5andblog/pen/ea62c27ddb5c7b022ab1e889e2f1b8d2 我觉得这可以用更简单的方式和我已经拥有的CSS来完成。

Answer 1

首先，更改HTML代码的这一行：

<button id="btnFlip">Flip the Coin</button>

致：

<button id="btnFlip" onclick="coin_flip()">Flip the Coin</button>

然后将您的javascript更改为此代码：

function coin_flip{
var coin_1 = "/images/image_1.png"
var coin_2 = "/images/image_2.png"
// the 8 below is the number of flips in your animation
for (var i = 0 ; i<8 ; i++){
    if (document.getElementById("coin").src == coin_1){
        document.getElementById("coin").src == coin_2
    }
    if (document.getElementById("coin").src == coin_2){
        document.getElementById("coin").src == coin_1
    }
}
// below chooses a random side
var rand = Math.floor((Math.random() * 2) + 1);
document.getElementById("coin").src == "coin_" + rand
}

这个javascript代码在选择随机侧登陆之前翻转硬币8次。

Answer 2

您可以使用 animationend 事件来检测CSS动画何时结束。

然后执行代码以更改图像源。

<强> JQuery的

$('#coin').on('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
function(e) {

    $("#coin").removeClass('animateCoin');
    setTimeout(function() {
            var srcImg = $($('#coin img')[0]).attr('src');
            if (srcImg === coin.heads)
                $($('#coin img')[0]).attr('src',coin.tails);
            else
                $($('#coin img')[0]).attr('src',coin.heads);
            $("#coin").addClass('animateCoin');
    },50);          
});

CSS：

.animateCoin {
    animation: flip 1s;
}

Answer 3

这是您可以翻转硬币2面解决方案运行代码段的完整代码。要观看正确的结果，请在全页视图中查看，否则可以在Codepen上查看。您也可以拥有Codepen的链接click here

jQuery(document).ready(function($){

	var spinArray = ['animation900','animation1080','animation1260','animation1440','animation1620','animation1800','animation1980','animation2160'];

	function getSpin() {
	var spin = spinArray[Math.floor(Math.random()*spinArray.length)];
	return spin;
	}

	$('#flip').on('click', function(){

	$('#coin').removeClass();

	setTimeout(function(){
	$('#coin').addClass(getSpin());
	}, 100);

	});

	});

html, body {
	margin: 0;
	width: 100%;
	height: 100%;
	background-color: #333;
	}

	#coin-flip-cont {
	width: 200px;
	height: 200px;
	position: absolute;
	top: calc(50% - 100px);
	left: calc(50% - 100px);
	}

	#coin {
	position: relative;
	width: 200px;
	transform-style: preserve-3d;
	}

	#coin .front, #coin .back {
	position: absolute;
	width: 200px;
	height: 200px;
	}

	#coin .front {
	transform: translateZ(1px);
	border-radius: 50%;
	background-color: #3498db;
  border: solid 5px gray;
	}

	#coin .back {
	transform: translateZ(-1px) rotateY(180deg);
	border-radius: 50%;
	background-color: #2ecc71;
  border: solid 5px gray;
	}

	#coin.animation900 {
	-webkit-animation: rotate900 3s linear forwards; 
	animation: rotate900 3s linear forwards;
	}

	#coin.animation1080 {
	-webkit-animation: rotate1080 3s linear forwards; 
	animation: rotate1080 3s linear forwards;
	}

	#coin.animation1260 {
	-webkit-animation: rotate1260 3s linear forwards; 
	animation: rotate1260 3s linear forwards;
	}

	#coin.animation1440 {
	-webkit-animation: rotate1440 3s linear forwards; 
	animation: rotate1440 3s linear forwards;
	}

	#coin.animation1620 {
	-webkit-animation: rotate1620 3s linear forwards; 
	animation: rotate1620 3s linear forwards;
	}

	#coin.animation1800 {
	-webkit-animation: rotate1800 3s linear forwards; 
	animation: rotate1800 3s linear forwards;
	}

	#coin.animation1980 {
	-webkit-animation: rotate1980 3s linear forwards; 
	animation: rotate1980 3s linear forwards;
	}

	#coin.animation2160 {
	-webkit-animation: rotate2160 3s linear forwards; 
	animation: rotate2160 3s linear forwards;
	}

	@-webkit-keyframes rotate900 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(900deg); -moz-transform: rotateY(900deg); transform: rotateY(900deg); }
	}

	@keyframes rotate900 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(900deg); -moz-transform: rotateY(900deg); transform: rotateY(900deg); }
	}

	@-webkit-keyframes rotate1080 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1080deg); -moz-transform: rotateY(1080deg); transform: rotateY(1080deg); }
	}

	@keyframes rotate1080 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1080deg); -moz-transform: rotateY(1080deg); transform: rotateY(1080deg); }
	}

	@-webkit-keyframes rotate1260 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1260deg); -moz-transform: rotateY(1260deg); transform: rotateY(1260deg); }
	}

	@keyframes rotate1260 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1260deg); -moz-transform: rotateY(1260deg); transform: rotateY(1260deg); }
	}

	@-webkit-keyframes rotate1440 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1440deg); -moz-transform: rotateY(1440deg); transform: rotateY(1440deg); }
	}

	@keyframes rotate1440 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1440deg); -moz-transform: rotateY(1440deg); transform: rotateY(1440deg); }
	}

	@-webkit-keyframes rotate1620 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1620deg); -moz-transform: rotateY(1620deg); transform: rotateY(1620deg); }
	}

	@keyframes rotate1620 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1620deg); -moz-transform: rotateY(1620deg); transform: rotateY(1620deg); }
	}

	@-webkit-keyframes rotate1800 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
	}

	@keyframes rotate1800 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
	}

	@-webkit-keyframes rotate1980 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1980deg); -moz-transform: rotateY(1980deg); transform: rotateY(1980deg); }
	}

	@keyframes rotate1980 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1980deg); -moz-transform: rotateY(1980deg); transform: rotateY(1980deg); }
	}

	@-webkit-keyframes rotate2160 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(2160deg); -moz-transform: rotateY(2160deg); transform: rotateY(2160deg); }
	}

	@keyframes rotate2160 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(2160deg); -moz-transform: rotateY(2160deg); transform: rotateY(2160deg); }
	}
.button {
  background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-top: 125px;
		position: inherit;
}
.front-text{
    font-weight: 700 !important;
    margin-top: 45%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
			<div>
			  <div id="coin-flip-cont">
			    <div id="coin">
            <div class="front"><p class="front-text">Head</p></div>
            <div class="back"><p class="front-text">Tail</p></div>
			    </div>
			  </div>
			  <button type="button" id="flip" class="button"> Flip Coin</button>
			</div>
</center>

使硬币翻转动画双面

3 个答案: