我想做一個記憶游戲。我想在 JS 中為翻轉編寫一個 CSS 動畫，這樣我就可以調用一個函數，因為我想制作一個 onclick 動畫而不是懸停動畫。如何使用 Javascript 中的 oncklicked 函數制作 CSS 翻轉動畫？var card = "<div class='flip-card'><div class='flip-card-inner'><div class='flip-card-front'><button id='button'onclick='Flipfront()'style='width:300px;height:300px; marign:50px; background-image:url(Frontpage.jpg);'></button></div><div class='flip-card-back'><button id='button2' onclick='Flipback()'style='width:300px;height:300px; marign:50px; background-image:url(IMG1.jpg);'></button></div></div></div>"for (let i = 0; i < 20; i++) { document.querySelector("#container").innerHTML += card;}function Flipfront() { // ?}function Flipback() { // ?}.flip-card { background-color: transparent; width: 300px; height: 200px; border: 1px solid #f1f1f1; perspective: 1000px; /* Remove this if you don't want the 3D effect */}/* This container is needed to position the front and back side */.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d;}/* Do an horizontal flip when you move the mouse over the flip box container */.flip-card:hover .flip-card-inner { transform: rotateY(180deg);}/* Position the front and back side */.flip-card-front,.flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden;}/* Style the front side (fallback if image is missing) */.flip-card-front { background-color: #bbb; color: black;}/* Style the back side */.flip-card-back { transform: rotateY(180deg);}<div id="outerbackground"> <img src="background.jpg" class="backgorund" border="1" id="BG"></div><div id="container"></div>
3 回答
侃侃無極
TA貢獻2051條經驗 獲得超10個贊
您是否嘗試過點擊時動態更改類？.flip-card-inner單擊元素時，您可以使用classlist屬性及其方法添加類并刪除 '.flip-card-front`
用法是：
elem.classList.add("flip-card-inner");
elem.classList.remove("flip-card-front");
偶然的你
TA貢獻1841條經驗 獲得超3個贊
為了進一步闡述我的評論：:hover您可以使用類來.flipped控制卡片的翻轉狀態，而不是使用 。
然后，在Flipfront()和Flipback()方法中，確保接受將從標記傳入的參數，該參數將作為Flipfront(this)或調用Flipback(this)。這將允許您訪問觸發它的元素。
然后，只需使用Element.closest()訪問.flip-card父類，并使用Element.classList.add()或Element.classList.remove()切換flipped類：
var card = "<div class='flip-card'><div class='flip-card-inner'><div class='flip-card-front'><button id='button'onclick='Flipfront(this)'style='width:300px;height:300px; marign:50px; background-image:url(Frontpage.jpg);'></button></div><div class='flip-card-back'><button id='button2' onclick='Flipback(this)'style='width:300px;height:300px; marign:50px; background-image:url(IMG1.jpg);'></button></div></div></div>"
for (let i = 0; i < 20; i++) {
? document.querySelector("#container").innerHTML += card;
}
function Flipfront(el) {?
? el.closest('.flip-card').classList.add('flipped');
}
function Flipback(el) {?
? el.closest('.flip-card').classList.remove('flipped');
}
.flip-card {
? background-color: transparent;
? width: 300px;
? height: 200px;
? border: 1px solid #f1f1f1;
? perspective: 1000px;
? /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
? position: relative;
? width: 100%;
? height: 100%;
? text-align: center;
? transition: transform 0.8s;
? transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card.flipped .flip-card-inner {
? transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
? position: absolute;
? width: 100%;
? height: 100%;
? -webkit-backface-visibility: hidden;
? /* Safari */
? backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
? background-color: #bbb;
? color: black;
}
/* Style the back side */
.flip-card-back {
? transform: rotateY(180deg);
}
<div id="outerbackground">
? <img src="background.jpg" class="backgorund" border="1" id="BG">
</div>
<div id="container"></div>
狐的傳說
TA貢獻1804條經驗 獲得超3個贊
不要用 JS 寫 CSS。相反，只需更改:hover規則以取決于.flip-card單擊每個類時您切換的類。
另請注意，您不應該使用onX屬性，因為它們已經過時，并且由于違反了關注點分離原則而成為不良實踐。相反，請使用不顯眼的事件處理程序。內聯屬性也是如此style。將這些規則移至外部樣式表中。這是一個工作示例：
let card = '<div class="flip-card"><div class="flip-card-inner"><div class="flip-card-front"><button id="button"></button></div><div class="flip-card-back"><button id="button2"></button></div></div></div>';
for (let i = 0; i < 20; i++) {
document.querySelector("#container").innerHTML += card;
}
document.querySelectorAll('.flip-card').forEach(el => {
el.addEventListener('click', () => el.classList.toggle('flipped'));
});
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* remove :hover here */
.flip-card.flipped .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
transform: rotateY(180deg);
}
#button {
width: 300px;
height: 300px;
background-image: url(Frontpage.jpg);
}
#button2 {
width: 300px;
height: 300px;
background-image: url(IMG1.jpg);
}
<div id="outerbackground">
<img src="background.jpg" class="backgorund" border="1" id="BG">
</div>
<div id="container"></div>
- 3 回答
- 0 關注
- 159 瀏覽
添加回答
舉報
0/150
提交
取消