- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我注意到新的 Firefox Quantum 上的动画有问题。
当您第一次加载包含一些动画元素 display: none;
的页面时,当脚本将其切换为 .display = "block";
时,您将错过整个动画,或者它的某些部分在开头,如果它长于几秒。
在下面的代码片段中查看:
var anims = document.getElementsByClassName("anim"),
time = document.getElementById("time"),
interval = null;
function animate() {
for (var i = 0; i < anims.length; i++)
anims[i].style.display = "block";
}
function timer(sec) {
time.textContent = sec--;
interval = setInterval(function () {
time.textContent = sec >= 0 ? sec-- : clearInterval(interval) || "";
}, 1000);
}
// Directly after click
button0.addEventListener("click", animate);
// One seconds after click
button1.addEventListener("click", function () {
timer(1);
setTimeout(animate, 1000);
});
// Two seconds after click
button2.addEventListener("click", function () {
timer(2);
setTimeout(animate, 2000);
});
// Three seconds after click
button3.addEventListener("click", function () {
timer(3);
setTimeout(animate, 3000);
});
// Hide the divs
reset.addEventListener("click", function () {
for (var i = 0; i < anims.length; i++)
anims[i].style.display = "none";
});
body {
font-family: arial;
}
body > div {
margin-bottom: 10px;
}
#result {
background-color: #e5f3ff;
height: 120px;
padding: 10px;
}
.anim {
display: none;
float: left;
margin: 10px;
width: 50px;
height: 50px;
border-radius: 5px;
animation: animate 1.5s;
}
#anim1 {
background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
/* Only one iteration iteration (default) */
/* This one will not be animated */
}
#anim2 {
background-color: #fddb92;
animation-iteration-count: 3;
/* Three iterations */
/* Only one iteration will be seen */
}
#anim3 {
background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
animation-iteration-count: infinite;
/* Infinite */
/* No visible problem */
}
@keyframes animate {
50% {
transform: translate(80%, 100%) rotate(-360deg);
}
}
<div>
<span><strong>Reload the snippet</strong>
before clicking another button for viewing the issue
<br/><strong>Or,</strong>
<em>Reset</em> (display: "none") before clicking a button to view with no issue: </span>
</div>
<div>
<button id="button0">On click</button>
<button id="button1">1 sec timeout</button>
<button id="button2">2 sec timeout</button>
<button id="button3">3 sec timeout</button>
<button id="reset">Reset</button>
<span id="time"></span>
</div>
<div id="result">
<div id="anim1" class="anim"></div>
<div id="anim2" class="anim"></div>
<div id="anim3" class="anim"></div>
</div>
你会注意到无限动画显然没有任何问题,但其他两个显然有问题。
那怎么解决呢?
注意:
最佳答案
经过测试,很确定它可以通过使用类解决所有浏览器的问题。有更多的方法来处理它,但将动画放在一个新类中,只有在单击按钮后才添加该类。
在 CSS 中我将动画属性移到了一个新类中,新类还添加了 block 样式。
.anim-start {
display: block;
animation: animate 1.5s;
}
在 JS 中,我只将 style.display='block'
更改为anims[i].classList.add('anim-start');
参见: https://jsfiddle.net/0mgqd2ko/1/
使用新类的这个方法就更简单了。例如,如果你想从不透明度 0 过渡到 1 怎么办?从不显示开始时很难做到这一点。如果您只想使用可见性以便元素仍然占用空间怎么办?
关于javascript - Firefox Quantum 上的动画问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47739338/
我有一个状态|Q>的n位并想要测量位数 i 。是否有一个矩阵可以应用于状态,所以状态 Q最终为Q' ,比如 Hadamard 或 X 门? 或者我应该应用测量矩阵 |x>
我的 Firefox 刚刚更新到 Quantum,看起来用户代理不正确。现在是: Mozilla/5.0(Windows;U;Windows NT 5.0;rv:1.8.0.3)Gecko/20060
我有一个状态|Q>的n位并想要测量位数 i 。是否有一个矩阵可以应用于状态,所以状态 Q最终为Q' ,比如 Hadamard 或 X 门? 或者我应该应用测量矩阵 |x>
我正试图开始研究量子处理和量子算法,有什么资源可以从中获得这方面的知识? 有推荐的SDK吗? 有在线环境吗?(IBM也许会提供一个真正的量子处理器?) 在量子计算环境中,Hello World!会是什
正如标题所说,如何在 Q# 中实现 Grover 的扩散算子?我知道它被定义为 2 ⟨s|s⟩ - I哪里|s⟩是任意数量的量子比特的统一状态。这可以进一步定义为夹在一对 H 门之间的 Z0(看到它称
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗? 通过 editing this post 添加细节并澄清问题. 关闭 2 年前。 Improve t
在 Chrome 和 Firefox 中 const myWorker = new SharedWorker( "sharedWorkerChat.js" ); const port
我正在编写一个网站,该网站在 Bootstrap 4 之上使用了丰富的 Material Design 主题。到目前为止,我已经能够使所有浏览器 chrome 至少在某种程度上与该网站匹配(Chrom
今天,我将我的 Firefox 浏览器更新为 Firefox Quantum。但是当我想调试我的网络应用程序时,开发工具字体非常小。有什么办法可以调整吗??? firefox dev tool fon
我注意到新的 Firefox Quantum 上的动画有问题。 当您第一次加载包含一些动画元素 display: none; 的页面时,当脚本将其切换为 .display = "block"; 时,您
我想根据以下矩阵制作一个量子电路。 matrix to be transformed into qubit operations如何将此矩阵分解为 Rotation Y、Control-NOT 等量子
我刚刚安装了 Kony Studio 。我尝试在 Android 模拟器上运行 HelloWorld 应用程序,总是出现此错误: Failurerm failed for /sdcard/profil
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 7 个月前关闭。 Improve t
当我深入研究所有可用文献时,我一遍又一遍地阅读,在量子计算中,最小的值(value)单位——量子比特——必须保持“ secret ”或未知,直到它被测量为止。在 StackOverflow 中,我什至
我正在使用适用于 Python 的 Microsoft Quantum Development Kit。我可以在真正的量子计算机上运行代码吗? 感谢您的回答。 最佳答案 本周早些时候,我们有 anno
关闭。这个问题需要更多 focused .它目前不接受答案。 想改进这个问题?更新问题,使其仅关注一个问题 editing this post . 11 个月前关闭。 Improve this que
我多久可以得到一台量子计算机?有什么方法可以建立一个简单的吗?对于早期采用者来说,它们还有多少年? 我想从高层次上了解 QBit 是什么,它可以有多少状态,以及哪些类型的算法可以在这个领域很好地工作。
是否可以使用不超过 2 个 Toffoli 门来实现或门? 我已经使用 3 个 Toffoli 门实现了它,但是找不到任何方法来使用 2 个 Toffoli 门实现它。 最佳答案 我假设您指的是两个量
是否可以使用不超过 2 个 Toffoli 门来实现或门? 我已经使用 3 个 Toffoli 门实现了它,但是找不到任何方法来使用 2 个 Toffoli 门实现它。 最佳答案 我假设您指的是两个量
我正在尝试在 Win 7 上通过 SSLKEYLOGFILE(将其放入 Wireshark)从 Firefox Quantum SSL 通信中提取预主 key ,如描述的那样在 https://www
我是一名优秀的程序员,十分优秀!