我正在尝试使用html5,CSS3和JS制作“记忆游戏”。我已经完成了这个游戏的视图和模型部分,现在正在尝试制作控制器。我想要的是调用一个函数,即在JS中翻转并希望该函数执行转换而不是使用CSS3的悬停效果。基本上我试图遵循this方法。我检查了使用悬停在css3中翻转,如下面的sass代码中所示,但对于游戏,用户决定在哪里点击。为简单起见,我已经在html5中对代码进行了简化,因为它重复了所有其他div。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>I Don't Know</title>
<link rel="stylesheet" href="trapStyle.css">
</head>
<body>
<div class = "container" >
<div class="sub1" >
<div class="front" id="card1" onclick="flip(card1)">card1</div>
<div class="back" id="card1_1">what the hell?</div>
</div> <--sub1 Ends-->
<div class="sub1">
<div class="front" id="card2" onclick="flip(this)">card2</div>
<div class="back" id="card2_2">what the hell?
</div> <--sub1 Ends-->
</div> <-- container Ends -->
<script src ="script.js"></script>
</body>
</html>
和css的SASS代码
.container {
position: absolute;
left: 115px;
width: 1150px;
height: 700px;
background-color: silver;
/* SUB-CONTAINER to stack two cards */
.sub1 {
width: 200px; height: 200px;
float:left; margin: 5px;
.front {
position:absolute; width: 200px; height: 200px;
background-color: #498010;
transform: perspective( 600px) rotateY(0deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
.back {
position: absolute; width: 200px; height: 200px;
float:left; background-color: #689;
transform: perspective( 600px) rotateY(180deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
}
.sub1:hover > .front {
/* transform: perspective(600px) rotateY(-180deg); */
}
.sub1:hover > .back {
/* transform: perspective(600px) rotateY(0deg); */
}
}
和JavaScript
function flip(front) {
document.getElementById("front").style.transition = opacity 0.5s linear 0s;
document.getElementById("front").style.opacity = 0;
}
注意:上面的链接试图将id传递给进行转换的JS函数。这里完全相同,只是为了从用户那里得到输入而不仅仅是悬停,但没有任何反应!我在我的编辑器中复制/粘贴链接代码并执行平滑过渡,但是当我的代码出现时,什么都没有!你能告诉我我的缺陷在哪里吗?
答案 0 :(得分:0)
将CSS从悬停状态更改为类,以便更改iunstance .sub1:hover to .hovered:
.container .hovered > .front {
transform: perspective(600px) rotateY(-180deg); }
.container .hovered > .back {
transform: perspective(600px) rotateY(0deg); }
现在,点击后,将此类添加到单击的元素:
$(".sub1").click(function() {
$(this).addClass ('hovered');
})
这个函数在javascript中将是
function change(element) {
element.className = element.className + " hovered";
}
前提是您在函数调用中发送元素
onclick="change(this)"