- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我需要在某些元素上实现“房间”3d 旋转;为了实现它,使用了 transform: translateX(-100%) rotateY(90deg)
及其相反的转换。它在 Chrome 中运行良好,但在 Firefox(最高版本 34)中,元素在过渡期间闪烁。他们可以只这样做片刻,已经走了一半,或者完全消失。
我注意到的是:如果父级的 perspective
CSS 值高于相关元素的计算宽度 - 过渡顺利。如果观点真的是罪魁祸首,那么我不明白这种行为的本质;规范说,如果 所有点 的 Z 轴值低于透视值,则不会绘制元素。在过渡期间,我的至少应该部分可见。
应该注意的是,只有 rotateY 看起来有问题 - 而不是 rorateX。
这里是代码示例。 HTML:
<div class="cont">
<div id="bg-club" class="background club"></div>
<div id="bg-cafe" class="background cafe active"></div>
<div id="bg-fitness" class="background fitness"></div>
<div id="bg-resto" class="background resto"></div>
<div id="bg-lady" class="background lady"></div>
</div>
CSS(为方便起见,删除了前缀规则):
.cont{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:1;
overflow:hidden;
perspective:1000px;
transform-style:preserve-3d;
}
.background.active{
visibility:visible;
z-index:1;
}
.background{
position:absolute;
top:50px;
right:50px;
bottom:50px;
left:50px;
z-index:10;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
transform-style: preserve-3d;
visibility:hidden;
overflow:hidden;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.background.cafe{background-color:#987071;}
.background.club{background-color:#a3367f}
.background.fitness{background-color:#79728b;}
.background.lady{background-color:#a6160e;}
.background.resto{background-color:#712912;}
.rotateRoomLeftOut {
transform-origin: 100% 50%;
animation: rotateRoomLeftOut 4s both ease;
}
.rotateRoomLeftIn {
transform-origin: 0% 50%;
animation: rotateRoomLeftIn 4s both ease;
}
@keyframes rotateRoomLeftOut {
to { opacity: .3; transform: translateX(-100%) rotateY(90deg); }
}
@keyframes rotateRoomLeftIn {
from { opacity: .3; transform: translateX(100%) rotateY(-90deg); }
}
这里是 the fiddle .通过按下 1-5 个黄色框,我们可以激活相应的背景动画。这里的视角
是1000px,所以需要的效果可以通过调整窗口大小来实现。
另一个例子是this great set of page 3D transitions .只需导航至旋转->房间->房间向左或向右。
编辑
似乎 Firefox 只使那些元素闪烁,其相应的尺寸(width
为 RotateY
或 height
为 rotateX
) 大于父级的视角
。我还没有弄清楚,为什么会这样,但到目前为止最简单和最直接的解决方案是将上述视角设置为大于元素的维度。在我的例子中,对于 FF 19+ 或其他方式,它将是 100vw
(或 100vmax
以涵盖两个旋转维度)。
更新后的代码段:
$(document).ready(function(){
var generalEvtAffix = '.hotdot', bodyEl = $('body'), pageContents = $('.sidebar, .center-block'),
tabsSel = $('.areas [data-toggle="tab"]');
// Анимация фонов на главной
var bgs = $('.background');
$('.areas [data-toggle="tab"]').on('click'+generalEvtAffix, function(event){
event.preventDefault();
var thisLink = $(this);
/* Если уже активен или анимация всё ещё не закончена, ничего не делаем */
if(thisLink.parent().hasClass('active') || bgs.hasClass('animated'))
return;
var bg = $('#bg-'+this.getAttribute('data-bg')),
bgActive = $('.background.active');
/* Случайным образом определяем направление анимации. */
var animationDirs = ["Left"/* , "Top", "Right", "Bottom" */],
animationDirection = animationDirs[Math.floor(Math.random() * (animationDirs.length) + 0)];
/* - отключаем клик по ссылке на направлении - чтобы временно заблокировать переключение вкладок */
tabsSel.on('click'+generalEvtAffix+'.clicked', function(e){
e.preventDefault();
return false;
});
bgActive.addClass('animated rotateRoom'+animationDirection+'Out')
.on('animationend.homepage-area-click webkitAnimationEnd.homepage-area-click', function(){
/* По окончании анимации "Прочь" прошлого активного элемента скрываем его */
$(this).removeClass('animated active rotateRoom'+animationDirection+'Out')
.off('animationend.homepage-area-click webkitAnimationEnd.homepage-area-click');
});
bg.addClass('animated active rotateRoom'+animationDirection+'In')
.on('animationend.homepage-area-click webkitAnimationEnd.homepage-area-click', function(event){
/* По окончании анимации обратно включаем клик. */
console.log(event);
$(this).removeClass('animated rotateRoom'+animationDirection+'In')
.off('animationend.homepage-area-click webkitAnimationEnd.homepage-area-click');;
tabsSel.off('click'+generalEvtAffix+'.clicked');
});
});
});
.cont{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:1;
overflow:hidden;
-webkit-perspective:1000px;
-moz-perspective:1000px;
perspective:1000px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
}
@-moz-document url-prefix(){
.cont{
perspective:100vw;
}
}
.background.active{
visibility:visible;
z-index:1;
}
.background{
position:absolute;
top:50px;
right:50px;
bottom:50px;
left:50px;
z-index:10;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
visibility:hidden;
overflow:hidden;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.background.cafe{
background-color:#987071;
}
.background.club{
background-color:#a3367f
}
.background.fitness{
background-color:#79728b;
}
.background.lady{
background-color:#a6160e;
}
.background.resto{
background-color:#712912;
}
/* Классы анимации фона типа "Room" */
.rotateRoomLeftOut {
-webkit-transform-origin: 100% 50%;
-webkit-animation: rotateRoomLeftOut 4s both ease;
-moz-transform-origin: 100% 50%;
-moz-animation: rotateRoomLeftOut 4s both ease;
transform-origin: 100% 50%;
animation: rotateRoomLeftOut 4s both ease;
}
.rotateRoomLeftIn {
-webkit-transform-origin: 0% 50%;
-webkit-animation: rotateRoomLeftIn 4s both ease;
-moz-transform-origin: 0% 50%;
-moz-animation: rotateRoomLeftIn 4s both ease;
transform-origin: 0% 50%;
animation: rotateRoomLeftIn 4s both ease;
}
/* Описание анимаций */
@-webkit-keyframes rotateRoomLeftOut {
to { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); }
}
@-moz-keyframes rotateRoomLeftOut {
to { opacity: .3; -moz-transform: translateX(-100%) rotateY(90deg); }
}
@keyframes rotateRoomLeftOut {
to { opacity: .3; transform: translateX(-100%) rotateY(90deg); }
}
@-webkit-keyframes rotateRoomLeftIn {
from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
}
@-moz-keyframes rotateRoomLeftIn {
from { opacity: .3; -moz-transform: translateX(100%) rotateY(-90deg); }
}
@keyframes rotateRoomLeftIn {
from { opacity: .3; transform: translateX(100%) rotateY(-90deg); }
}
.areas{
list-style:none;
position:relative;z-index:1000;
}
.areas li a{
display:block;
width:20px;
height:20px;
background:yellow;
margin:5px;
color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div id="bg-club" class="background club"></div>
<div id="bg-cafe" class="background cafe active"></div>
<div id="bg-fitness" class="background fitness"></div>
<div id="bg-resto" class="background resto"></div>
<div id="bg-lady" class="background lady"></div>
</div>
<ul class="areas text-center content-section">
<li><a href="#club" class="club" data-target="[data-tab='club']" data-bg="club" data-toggle="tab">1</a>
</li><li class="active"><a href="#cafe" class="cafe" data-target="[data-tab='cafe']" data-bg="cafe" data-toggle="tab">2</a>
</li><li><a href="#fitness" class="fitness" data-target="[data-tab='fitness']" data-bg="fitness" data-toggle="tab">3</a>
</li><li><a href="#resto" class="resto" data-target="[data-tab='resto']" data-bg="resto" data-toggle="tab">4</a>
</li><li><a href="#lady" class="lady" data-target="[data-tab='lady']" data-bg="lady" data-toggle="tab">5</a>
</li>
</ul>
仍然期待这种行为背后的原因。
最佳答案
我相信它闪烁的原因是因为 Mozilla 检测到该对象不在视野范围内。如果你的视角是 1000px,并且宽度为 1100px 的东西旋转,那么元素的边缘会从你身后经过并超出视野,mozilla 可能会确定为“不渲染”
我可以提供的唯一解决方案是将视角设置为 100vw 之类的值,以确保您的视角始终与屏幕的宽度一样远
关于CSS 3D : rotateY + translateX make elements flicker during in Firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23324958/
我最近从 Xcode 4.3 升级到 4.4,我正要沮丧地砸我的屏幕。 我遇到的问题是代码完成。当我输入一个变量或方法名称时,完成窗口会弹出它应该有的建议。但是,如果我尝试使用光标键在建议之间滚动,建
我在使用 jQuery 图像旋转器时遇到了一些问题。当快速单击下一个/上一个按钮两次时,图像会闪烁,您最终会看到两个图像。关于如何修复它有什么想法吗? 这是 HTML CSS
我已尽最大努力成为 Javascript/Ajax 技术的纯粹主义者,确保所有 Ajax-y 行为都是对基本功能的增强,而当禁用 Javascript 时,网站也能正常运行。但是,这会导致一些问题。
我的 Gatbsy 网站的页面加载时,未设置样式的内容“闪烁”。在此处查看当前部署预览可能最有帮助 https://happy-mahavira-5cd669.netlify.com/ . 到目前为止
背景:我们有一个嵌入式系统,可使用 10 位模数转换器将线性位置(0 毫米 - 40 毫米)从电位器电压转换为其数字值。 ------------------------ 0mm |
我尝试为伪元素宽度 css3 设置动画。一切都好。但在 Firefox (43.0.3) 上,动画结束时字体会闪烁: div { width:500px; height:500px; co
[已解决]:应用适当的列表迭代过程修复了问题。 (如下图) 我目前有一个程序,如果满足特定条件,列表中的元素将被迭代并删除。由于程序的性质,这可以直观地看到。 屏幕上正在迭代的对象有时会闪烁。这通常发
我有一个进度条,我想在用户单击某项时更新它。所以可以通过进度条来回前进。 目前,该栏似乎可以正常工作,但是该栏在闪烁,好像每秒都在加载该栏。例如,用户处于 70%,因此该条将填充到那里,然后清除,然后
我将 GridView 与图像项一起使用,通过 android DataBinding 技术 加载图像。如果向列表中添加一些新项目并通知适配器,那么 GridView 会闪烁,为什么会出现这种情况?如
我正在使用 KO 构建 SPA(单页应用程序)。该应用程序看起来像一本书,用户可以翻页。 问题是每次加载页面时,页面都会有短暂的“闪烁”,用户看到的是页面的无样式版本。我猜这是由于很多样式都依赖于 k
问题 如交互式 BaseTable API Playground 所示 here ,当我开始滚动时,跨行会闪烁开/关。 这是库中的一个已知错误,并且已经发布了很多关于它的问题: https://git
例如:我有一个 TFrame(称为 TPageFrame),它有许多控件,例如TreeView 左对齐、拆分器和由编辑和 RichEdit 组成的主客户区域,如下图所示: 代码看起来像这样: type
我正在尝试在 F# 中实现双缓冲。我遇到的所有示例都是 C#。 let r = form.DisplayRectangle let buffer = new Bitmap(r.Widt
我正在使用 grid 设计一个交互式绘图R 中的包。作为交互性的一部分,我反复删除并重新创建绘图的各个部分。但是,网格元素的总数(使用 grid.ls() 命令获得)保持不变;我创建的所有内容之前都已
场景如下:我有一些信息要显示在 ListView 上。每行都可以有标题、正文、日期、头像和更多数据。还有一个来自网络的 ImageView。 ImageView 的每一行都有不同的高度。我知道下载后它
我正在尝试制作数字时钟。它的问题之一是显示器会“闪烁”。换句话说,wx.StaticText 小部件(在本例中为 self.ST)将在很短的时间内变为空白。我相信原因可能在于 self.ST 更新的方
我似乎在使用在 Firefox(以及 iOS)中设置了“位置”的背景图像时遇到了问题。 在 iOS 上,当您滚动时图像会消失一秒钟,然后再回来。在 Firefox 上,它们只会在我使用 .animat
标题听起来有点乱,但我不想写得太长,所以请耐心阅读...... 我正在编写一个非常简单的 OpenGL 演示,它将图像加载为纹理,然后在屏幕上无限地水平滚动图像。以下是我如何加载纹理并渲染单帧: vo
我遇到了此处描述的相同问题:same problem ( fiddle :original fiddle)但我还不了解 JS,我在编写代码时正在学习,所以当我的 html 代码与现在有点不同时,我不知
您好 stackoverflow 社区... 我已将多个 (JavaFX) Menu 实例放入一个菜单中(位于 GluonMobile-View 的子节点中): 问题是,当类(class)器悬停其中一
我是一名优秀的程序员,十分优秀!