- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有一个以编程方式创建的 div 数组,如下所示:
// Create grid of pads dynamically, 16x16 in size
var padIdCount = 0;
for (var i = 0; i < 16; i++) {
for (var j = 0; j < 16; j++) {
var newPad = document.createElement("div");
WinJS.Utilities.addClass(newPad, "pad");
WinJS.Utilities.addClass(newPad, "row" + i);
WinJS.Utilities.addClass(newPad, "col" + j);
newPad.id = "pad" + padIdCount;
document.getElementById("padContainer").appendChild(newPad);
padIdCount++;
}
// Add a single line break after 16 pads
var newLineBreak = document.createElement("br");
document.getElementById("padContainer").appendChild(newLineBreak);
}
垫子是深灰色的,但如果用户点击垫子,它就会变成“事件垫子”
// Assign handler to pads, to toggle activation on click
var pads = document.querySelectorAll(".pad");
for (var padCount = 0; padCount < pads.length; padCount++) {
pads[padCount].addEventListener("click", togglePadActivation, false);
}
function togglePadActivation(e) {
// Get id of pad in question
var padId = e.target.id;
// Change pad from active to inactive and vice versa
var clickedPad = document.getElementById(padId);
WinJS.Utilities.toggleClass(clickedPad, "activePad");
}
样式
/* dark grey */
.pad {
height: 40px;
width: 40px;
margin: 1px;
padding: 0px;
background-color: #363636;
display: inline-table;
}
/* dark orange */
.activePad {
background-color: orangered;
opacity: 0.6;
}
.playingPad {
background-color: orangered;
opacity: 0.6;
/* workaround for pulse bug */
animation: pulselightonanimation 3.2s ease-out;
animation-iteration-count: infinite;
}
@keyframes pulselightonanimation {
0% {opacity: 1.0;}
50% {opacity: 0.8;}
100% {opacity: 0.6;}
}
现在设置已完成,事件处理程序已连接,用户可以单击一个按钮,开始循环遍历所有事件垫(首先是第 1 行,同时,然后是第 2 行,依此类推)。为此,我实现了一个 setTimeout。
// Run this method every 200ms
function playActiveNotes(rowCount) {
timer = setTimeout(function () {
// Reset after the last row, because we are looping indefinitely
if (rowCount === 16) {
rowCount = 0;
}
// Select all pads from the same row at once
var currentRow = ".row" + rowCount;
var currentRowPads = document.querySelectorAll(currentRow);
// Cycle through each pad, animate and play it if active
for (var padCount = 0; padCount < currentRowPads.length; padCount++) {
// If the pad is active play the note
if (WinJS.Utilities.hasClass(currentRowPads[padCount], "activePad")) {
// Show the pulse animation
WinJS.Utilities.addClass(currentRowPads[padCount], "playingPad");
// TODO: Play short mp3 file here
// Remove the animation class. This is where it fails
//currentRowPads[padCount].addEventListener("animationend", callback(currentRowPads[padCount]), false);
//currentRowPads[padCount].addEventListener("transitionend", callback(currentRowPads[padCount]), false);
// If I use a nested setTimeout, this removeClass code never gets called. If I comment it out, I don't see the pulse, i.e. add + remove happens too quickly
//setTimeout(function () {
if (padCount < 16)
WinJS.Utilities.removeClass(currentRowPads[padCount], "playingPad");
//}, 1000);
}
}
// Go to the next row
rowCount++;
// Then call self to setup a recursive loop.
playActiveNotes(rowCount);
}, 200);
}
function callback(element) {
element.classList.remove('playingPad');
}
当有源垫正在播放时(我播放一个简短的 mp3 文件),我希望它脉动,即快速变成亮橙色(但不是瞬间),然后逐渐变回原来的深橙色。我怎样才能做到这一点?我尝试使用带有 CSS 动画的播放垫类,并在过渡结束/动画结束时删除该类,但这没有用。
除了 Javascript 之外,还允许使用 WinJS,但不允许使用 JQuery。
最佳答案
我认为如果你能以某种方式让 CSS 动画运行起来,那仍然是最好的解决方案。
但是,这是另一种解决方案,使用 CSS 过渡:
/* dark grey */
.pad {
height: 40px;
width: 40px;
margin: 1px;
padding: 0px;
background-color: #363636;
display: inline-table;
}
/* dark orange */
.activePad {
background-color: #B2371B;
transition: background-color .5s;
-webkit-transition: background-color .5s;
}
/* bright orange */
.brightPad {
background-color: #FFFFFF;
transition: background-color .1s;
-webkit-transition: background-color .1s;
}
如果您将 .brightPad
类添加到 pad,这应该可以使它迅速变为亮橙色(在 .1 秒内)。一旦您删除该类并再次设置 .activePad
,它应该会慢慢变回深橙色 (.5s)。您必须在触摸时设置 .brightPad
,然后使用 100 毫秒或更长时间的超时再次将其删除。
这是一个快速的 JSFiddle:http://jsfiddle.net/R5VjH/1/
(抱歉,我用的是白色而不是漂亮的亮橙色)
关于javascript - 如何在 Javascript 中将脉冲动画添加到 div 数组中的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25047497/
这个问题在这里已经有了答案: How to initialize var? (11 个答案) 关闭 8 年前。 我想给一个变量赋初值 null,并在下一个 if-else block 中赋值,但是编
我正在使用 TypeScript 3.8 编写 JS 和 TS 混合的代码。我写了以下行: export * as Easing from './easing'; 应该是 fair game在 Typ
我需要将 R 代码中的“/”更改为“\”。我有这样的事情: tmp <- paste(getwd(),"tmp.xls",sep="/") 所以我的 tmp是 c:/Study/tmp.xls 我希望
我有个问题。例如我有这个: id truth count 1 1 1 2 1 2 3 0 0 4 1 1 5 1 2 6 1
我正在尝试使用“IN”和“=”来查找一些 bean。我目前正在使用此代码: $ids = array(1,2,3,4); $user = 1; $things = R::find( 'thing'
是否可以在 Xcode 中部署到其他人的手机上?我没有 iPhone,但我想测试我在 friend 手机上制作的应用程序。在我支付 99 美元之前,我想确保这不会造成麻烦。 谢谢。 最佳答案 不会有任
我试图得到一个非常大的数字(超过 unsigned long long int )。所以我把它作为一个字符串,然后一个数字一个数字地转换成整数并使用它。 #include #include int
我在 Rust 中有 C 语言库的绑定(bind),但它们并不完整。 在 C 代码中,我定义了一个简化的宏,如下所示: #define MY_MACROS1(PTR) (((my_struct1
我正在努力解决这个问题。 http://jsfiddle.net/yhcqfy44/ 动画应该自动相对于 滚动到顶部每次出现滚动条时的高度。 我已经写了这个,但没有运气: var hheight =
我正在处理一个将数字作为字符串返回的 JSON API。例如 "12" ,但是,该字段值也可以是非数字的,例如:"-" . 我已将 JSON 数据解析为映射,我想将此字段提取为 elixir 中的整数
我正在尝试编写一个类,将.wav文件转换为.aiff文件作为项目的一部分。 我遇到了几个库Alvas.Audio(http://alvas.net/alvas.audio,overview.aspx)
我想在 Lucene 中将像“New York”这样的“复合词”索引为单个术语,而不是像“new”、“york”那样。这样,如果有人搜索“new place”,则包含“new york”的文档将不会匹
我希望这个解释能让我更好地了解使用宏的优点。 最佳答案 在函数中,所有参数在调用之前都会被评估。 这意味着 or 作为函数不能是惰性的,而宏可以将 or 重写为 if 语句,该语句仅在以下情况下计算分
我有一些看起来像这样的 XML foo ]]> (注意 > 登录 "> foo")和 XSLT 样式表 当我运行xsltproc stylesheet.xs
当我尝试将 Any 转换为 List 时,如下面的示例所示,我得到“Unchecked cast: Any!”到列表'警告。有没有解决此类问题的方法? val x: List = objectOfTy
我正在使用 Python 开发一个简单的爬虫。目的是创建一个 sitemap.xml。(你可以在这里找到真正的 alpha 版本:http://code.google.com/p/sitemappy/
我想知道在 VBScript 中是否可以在多行中中断 If 语句。喜欢: If (UCase(Trim(objSheet.Cells(i, a).Value)) = "YES") Or _ (UCas
for (String item : someList) { System.out.println(item); } 使用“do while”是否等效? 谢谢。 最佳答案 如果列表为空,f
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: Split string with delimiters in C 在 C 中将“,”分隔的列表拆分为数组的最佳方法
我有一个如下所示的字符数组: [0, 10, 20, 30, 670] 如何将此字符串转换为整数数组? 这是我的数组 int i=0; size_t dim = 1; char* array = (c
我是一名优秀的程序员,十分优秀!