css - 翻转动画在 Safari 上不起作用
问题描述
我的网站上有一个翻转动画。它适用于 PC 和 Android 上的所有浏览器,但不适用于 safari。它会翻转,您会看到“背面”卡片的闪光,然后它会消失,您只会得到一个白色方块。我想我设置了-webkit-
它应该设置的样子,但由于某种原因它不起作用。有没有人有任何想法?
HTML:
<div class="card">
<div class="face front hover">
<img src="images/pawprints_edit.png" width="300" height="180" alt="sign up for al-van newsletter" id="news-img" class="d-inline-block col-md-12 img-fluid my-5 pt-2" />
<p id="thanks" class="text-center"></p>
</div>
<div class="face back">
<form name="mailForm" class="mail-form" autocomplete="on" novalidate>
<div class="form-group mb-0 px-2">
<label for="name">Name:</label>
<input type="text" class="form-control form-control-sm" id="name" placeholder="John Doe">
</div>
<div class="form-group mb-0 px-2">
<label for="email">Email Address:</label>
<input type="text" class="form-control form-control-sm" id="email" placeholder="yourname@domain.com">
</div>
<div class="form-group mb-0 px-2">
<label for="message">Please type your message:</label>
<textarea class="form-control form-control-sm" id="message" cols="30" rows="4"></textarea>
<input type="button" id="submit" value="Submit">
<input type="button" id="cancel" value="Cancel">
<p id="errorP" class="text-center"></p>
</div>
</form>
</div>
</div>
CSS:
/* form animation */
.scene {
width: 100%;
height: 300px!important;
perspective: 1000px;
-webkit-perspective: 1000px;
border: none;
}
.card {
width: 100%;
height: 100%;
position: relative;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
border: none;
}
.face {
position: absolute;
height: 100%;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.front {
background: #98b98a;;
-webkit-z-index: -1;
z-index: -1
}
.front.hover {
background: #98b98a;
-webkit-z-index: 2;
z-index: 2;
}
.back {
background: #4c87a9;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-z-index: 1;
z-index: 1;
}
.back [type=text]:hover {
cursor: text!important;
}
.card.is-flipped {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.hover:hover {
cursor: pointer;
}
/* End animation */
和JS:
/* flip animation script */
function flip()
{
'use strict';
console.log("Flip is being triggered");
var card = document.querySelector(".card");
var face = document.querySelector(".front");
var name = document.getElementById("name");
var email = document.getElementById("email");
var errorP = document.getElementById("errorP");
if(card.removeEventListener)
{card.removeEventListener("click", flip, false);}
else if(card.detachEvent)
{card.detachEvent("onclick", flip);}
card.classList.toggle("is-flipped");
face.classList.toggle("hover");
name.style.background = "#fff";
email.style.background = "#fff";
errorP.style.display = "none";
}
/* Function to flip the card back over when canceled */
function cancelFlip()
{
'use strict';
console.log("Cancel has been activated");
var card = document.querySelector(".card");
var face = document.querySelector(".front");
card.classList.toggle("is-flipped");
face.classList.toggle("hover");
setTimeout(function(){if(card.addEventListener){card.addEventListener("click",flip,false);}else if(card.attachEvent){card.attachEvent("onclick",flip);}console.log("setTimeout was triggered");}, 500);
}
我正在使用 Boostrap 3 框架。JS 是自定义的,CSS 取自在线教程。该网站的链接是:http ://www.al-van.org/jake我正在 Windows 平台上开发,没有 iPhone 可以测试,所以我让我的继父在他的当我进行更改时的 iPhone。到目前为止,没有任何工作。
更新:好像表格在那里,我可以点击东西并输入文本,但你实际上看不到任何东西。它显示为一个白色方块,什么都看不见。我将背面可见性从 .face 移动到每个 .front 和 .back 以查看是否会有所作为。似乎没有。
解决方案
我发现了这个问题。似乎这个.card
类有一个默认的背景颜色,它使整个表单变成白色,翻转时洗掉它的所有组件。当我删除此默认背景颜色并使其透明时。问题已解决。
推荐阅读
- python - 如何为命令行脚本组织一个带有诗歌的python项目
- powershell - PowerShell - 通过将参数传递给 Select-Object,从多个制表符/CSV 分隔文件中获取基于多列的唯一行
- .net - 如何将具有日期时间模式的字符串映射到打字稿日期对象
- bash - 使用 vim 和 screen
- ios - 如何快速将数据从视图控制器传递到容器视图
- django - 确保数据位于 django 模板中正确的 tabe 列中
- php - 在所有运输方式名称前添加 WooCommerce 品牌名称
- angular - 角材料微调器不旋转
- jquery - JQuery获取所有选定单选按钮的列表
- javascript - 是什么导致此代码段中的“Javascript 错误(意外令牌)”?