我对 Web 开发有点陌生,我想创建一个具有高亮脉冲效果的图形按钮,让我解释一下:
按钮构建了2层,第一层是默认状态总是显示,第二层是高亮状态(白色)只有当按钮被点击或触摸时才显示(该层的不透明度显示时为1,隐藏时为0 )。
我的问题是,无论单击或触摸事件的持续时间如何,我都希望突出显示的不透明度从 0 变为 1。只有在达到值 1 时才会转换回不透明度 0 值,这意味着在高亮层的不透明度达到 1 之前不应触发释放事件(mouseup 或 touchend)。
我正在使用 Compass (scss) 和 jquery mobile 与 phonegap 封装。
我编写了一个有效的版本,但不符合我的目标:一旦我释放按钮,到突出显示状态的转换就会停止(例如,如果我非常快速地触摸,即使不透明度转换为 0.2 秒, 高亮状态是不可见的,尽管触发了 touchend 事件...(过渡在到达 1 之前返回到 0)...
整个代码可能不是那么干净,但我正在努力学习:)
欢迎任何线索或建议!
HTML 代码如下所示:
<div class=btn-test>
<span>
<a class=btn-a href=#>
</a>
</span>
</div
SCSS 看起来像这样:
@import "compass/reset";
@import "compass/css3";
.btn-test {
span {
@include background-image(image-url("foo.png"));
background-position: 0px 0px;
width: 72px;
height: 70px;
display: inline-block;
}
a {
@include background-image(image-url("foo.png"));
background-position: 0 71px;
@include transition-property(opacity);
@include transition-duration(0.2s);
@include transition-timing-function(ease);
width: 72px;
height: 70px;
display: inline-block;
-webkit-touch-callout: none !important;
}
.btn-a {
opacity: 0;
}
.btn-a:active {
opacity: 1;
}
}