- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我想使用 CSS 和 Angular Js 制作幻灯片动画。我是这样的:JSFiddle在 chrome 上,此动画效果完美。但是在 Firefox 上,当动画继续播放时,文本会稍微抖动和闪烁。我无法找出确切的问题。任何想法..
代码:
HTML:
<div ng-controller="animationCtrl">
<ul class='list'>
<li>
<div class="slide-animation">
<div class="slide-animation-wrap new-slide-wrap {{cssTimeInfo1}}"> <span class="text">{{valueSet1[0]}}</span>
<label class="small-label">{{valueSet2[1]}}</label>
</div>
<div class="slide-animation-wrap old-slide-wrap {{cssTimeInfo1}}"> <span class="text">{{valueSet1[1]}}</span>
<label class="small-label">{{valueSet2[1]}}</label>
</div>
</div>
</li>
</ul>
</div>
CSS:
.list > li {
box-sizing:border-box;
height: 72px;
display: inline-block;
margin-right: 1.06%;
padding: 15px;
vertical-align: top;
background-color: #f1f1f1;
-webkit-box-shadow: 0 0 7px rgba(210, 210, 210, 0.3) inset;
box-shadow: 0 0 7px rgba(210, 210, 210, 0.3) inset;
}
.small-label {
height: 24px;
display: block;
font-size: 0.714em;
margin-bottom: 0;
color: #999999;
text-transform: uppercase;
text-align: center;
}
.text {
height: 24px;
display: block;
font-size: 1.286em;
margin-bottom: 3px;
color: #666666;
text-align: center;
}
/* Slide animation */
.slide-animation {
overflow: hidden;
position: relative;
height: 40px;
}
.slide-animation-wrap {
position: relative;
width: 100%;
}
.slide-animation-wrap.new-slide-wrap {
top: -45px;
}
.slide-animation-wrap.old-slide-wrap {
top: -51px;
}
.slide-animation-wrap.slide-in-animation,
.slide-animation-wrap.slide-out-animation {
-webkit-animation: slide-outside-animation 1s linear forwards;
-o-animation: slide-outside-animation 1s linear forwards;
animation: slide-outside-animation 1s linear forwards;
}
.slide-animation-wrap:before,
.slide-animation-wrap:after {
content: " ";
display: table;
}
.slide-animation-wrap:after {
clear: both;
}
.slide-animation-wrap:before,
.slide-animation-wrap:after {
content: " ";
display: table;
}
.slide-animation-wrap:after {
clear: both;
}
@-webkit-keyframes slide-outside-animation {
0% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
}
}
@-moz-keyframes slide-outside-animation {
0% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
}
}
@-ms-keyframes slide-outside-animation {
0% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
}
}
@keyframes slide-outside-animation {
0% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
}
}
Angular :
var myApp = angular.module('myApp',[]);
myApp.controller('animationCtrl', ['$scope','$interval', function ($scope,$interval) {
$scope.valueSet1=['HGFhgfsffghfhgf','HGFhgfsffghfhgf'];
$scope.valueSet2=['ABC','ABC'];
$scope.cssTimeInfo1 = "display-none";
$scope.cssTimeInfo2 = "display-none";
var flag=0;
$interval(function(){
//0
$scope.cssTimeInfo1='slide-in-animation';
$scope.cssTimeInfo2 = "display-none";
flag++;
if(flag>1){
flag=0;
//0
$scope.cssTimeInfo1 = " ";
$scope.cssTimeInfo2 = " ";
}
else{
//1
$scope.cssTimeInfo1 = "slide-out-animation";
$scope.cssTimeInfo2 = "slide-in-animation";
}
},1000);
}]);
最佳答案
我在使用转换的 Firefox 上遇到了文本闪烁问题。添加
背面可见性:隐藏;
转换后的元素为我解决了这个问题。
关于html - 在 firefox 上播放动画时文本闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32179300/
我是 Jetpack Compose 的新手。我目前正在开发一个聊天应用程序。我要求用户从图库中选择图像或从相机中拍照。然后我将文件 Uri 保存到数据库中,然后收听所有消息的列表。更新此列表时,此图
强制性代码,但 jsFiddle 准确地演示了这个问题。我有一个在 3 秒内扩大和淡出的圆圈。声纳风格是我的意图。问题是动画完成后它会快速“闪烁”然后重新开始。 请在此处查看问题:http://jsf
您好,我有一个多种颜色的 Logo ,我想将其用于随机/不稳定的故意闪烁效果。我只能找到其他关于使用淡入/淡出功能进行闪烁技巧的文章。关于如何用 css3 和/或 jQuery 做这样的技巧有什么想法
我正在使用 Swing 创建组件并使用 GLCanvas (com.jogamp.opengl.awt.GLCanvas) 创建我的窗口。 接下来就是问题了 在初始状态下,一切正常,但是当我拖动窗口调
我将 PhoneGap 2.2.0 与 jQuery Mobile 1.2.0 结合用于我在 Android 平台(版本 2.3.3 及更高版本)上的应用程序。在我使用固定标题的页面上,根本没有转换。
在我们使用 JavaScript 向页面添加图像或文本后,我们的网页在 iPad 上闪烁。我们尝试了 -webkit-backface-visibility:hidden; 的各种组合; -webki
有人能告诉我为什么在这个使用 SwingWorker 的简单演示中,屏幕闪烁,好像按钮不断跳跃一样? (关于改进多线程部分的反馈也值得赞赏)。 import java.awt.EventQueue;
我正在运行时从 CSV 文件向字符串网格添加多行,但是 StringGrid 在更新时似乎会闪烁很多,我认为会有一个 beginupadate/Endupdate 命令来停止此操作。但是我找不到它。有
我的窗口中有一个文本元素,我希望它每隔几秒或几毫秒闪烁一次或出现并消失。 我的代码是: import QtQuick 2.6 import QtQuick.Window 2.2 Window {
我的窗口中有一个文本元素,我希望它每隔几秒或几毫秒闪烁一次或出现并消失。 我的代码是: import QtQuick 2.6 import QtQuick.Window 2.2 Window {
我在UIButtons中有3个UIView,它们具有相同的文本颜色和相同的背景颜色。轻按三个按钮即可触发相应的事件。但是只有其中之一会响应触摸而“闪烁”。其他两个会发生什么?它们有时(但很少)具有“闪
我在 iOS 8 下实现 UIRefreshControl 时遇到了一种闪烁。每次我第一次到达 tableView 的顶部时(即应用程序刚刚启动时),我都会看到下面的 gif 中显示的闪烁。这不会发生
我希望有人能帮助我。我遇到以下问题: http://jsfiddle.net/zhPAF/ 标记: About Us
当鼠标悬停在图像“A”上时,尝试让图像“B”覆盖在图像“A”上。理想情况下,我希望它淡入。 HTML: jQuery:
我有一个 TabControl,我可以在其中添加/删除多个 TabPage。 当我添加足够多的页面以至于必须显示导航按钮时,我遇到了闪烁问题。 当导航按钮(左右导航的 2 个箭头)未显示时,我根本没有
我尝试实现自定义双缓冲,但它会导致闪烁。 这是控件(继承自Control的自定义控件)构造函数中的代码: bufferContext = new BufferedGraphicsContext();
我有以下代码: var footer = $('.footer'), extra = 0; // footer.css({ opacity: '0', display: 'block' });
我遇到了与 JPanel 中闪烁相关的问题。不知道为什么, window 里的球时不时地闪烁。我尝试了几种方法,比如双缓冲、BufferStrategy、Canvas,但都不起作用。主要思想是使用线程
我试图在 OpenGL 中绘制一些文本,而程序绘制立方体或任何 Opengl native ,因此,当我尝试将文本放在屏幕上时,它闪烁得非常快,我不知道为什么,我试图改变 sleep 值什么都没有..
我已经使用 LibGDX UI Setup 启动了一个项目。 我在 implements ApplicationListener 中唯一拥有的是: public void create() {
我是一名优秀的程序员,十分优秀!