我是网络开发的新手,我想创建一个带有高亮脉冲效果的图形按钮,让我解释一下:
按钮构建为2层,第一层是始终显示的默认状态,第二层是仅在单击或触摸按钮时显示的突出显示状态(白色)(显示时此层的不透明度为1)隐藏时为0。
我的问题是,无论点击持续时间或触摸事件如何,我都希望突出显示的不透明度从0变为1。只有在达到值1时才会转换回不透明度0值,这意味着在高亮层的不透明度达到1之前,不应触发释放事件(mouseup或touchend)。
我正在使用Compass(scss)和带有phonegap封装的jquery mobile。
我编写了一个有效的版本,但不符合我的目标: 一旦我释放按钮,就会停止向突出显示状态的转换(例如,如果我进行非常快速的触摸,即使在不透明度上有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;
}
}
答案 0 :(得分:1)
你想要的是一个动画,而不是一个简单的过渡。您可以使用gem install compass --pre
解决方案是为您的不同状态添加关键帧:
@import "compass/css3/animation";
@include keyframes(flashButton){
0%{
opacity: 0;
}
50%{
opacity: 1;
}
100% {
opacity: 0;
}
}
.animate-button {
@include animate(flashButton 1s ease);
}
然后用一点点jQuery:
$('.btn-test').on('click', function(){
//reset state in case animation has already been played
$('.btn-test').removeClass('animate-button');
setTimeout(function(){$('.btn-test').addClass('animate-button')}, 1)
});
我还没有使用它,但你也可以使用https://github.com/ericam/compass-animate这是这里发现的伟大的CSS动画的罗盘端口http://daneden.me/animate/