我正在创建一个链接,当点击链接时,它会向下移动几个像素。 我希望这是一个动画,所以我添加了css过渡。 现在我遇到的问题是,当我按下按钮时,它不会完成动画。 只要我按住鼠标按钮,它就会动画。
所以我想要的是链接完成动画,之后回到正常位置。 (这意味着我无法使用:访问因为它不会恢复正常)。
这是我用来澄清我的问题的小提琴:
这是我使用的代码:
CSS
.button
{
font-size: 132px;
font-family: helvetica, sans;
font-weight: bold;
text-shadow: 0px 7px 0px #3b6e62;
color: #f2b191;
text-align:center;
padding-top: 46px;
padding-top:0px;
-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
}
.button:hover {padding-top:3px; text-shadow: 0px 4px 0px #3b6e62;}
.button:active {padding-top:7px; text-shadow: 0px 0px 0px #3b6e62;}
HTML
<div class="button">This is a button</div>
我愿意用jquery修复问题,但我不是专家。
我只是想通过使用jQuery找到出路。 但是,我不确定它是否正确。 动画并不像css伪类那样流畅。
任何人都可以添加一些内容吗?
$('.button').hover(function(){
$(this).css({'top': '3px', 'text-shadow': '0px 4px 0px #3b6e62'});
});
$('.button').click(function(){
$(this).css({'top': '7px', 'text-shadow': '0px 0px 0px #3b6e62'});
});
$('.button').mouseout(function(){
$(this).css({'top': '0px', 'text-shadow': '0px 7px 0px #3b6e62'});
});
答案 0 :(得分:1)
据我所知,目前仍无法将点击事件绑定到css。 这项工作很容易用Javascript / jQuery完成。
您需要做的就是在单击元素时应用给定的类。 我刚刚更改了你的CSS上的一个类的名称
.button-active {padding-top:7px; text-shadow: 0px 0px 0px #3b6e62 !important;}
在单击元素后将其应用于div
$('.button').click(function(){
$(this).addClass('button-active');
});
查看this bin。
在我的例子中,我正在使用jQuery。需要注意的是,如果你只是为这个动画使用它,你最好使用纯Js,而不包括一个完整的库来实现这么简单的效果。
答案 1 :(得分:1)
单击时可以向元素添加一个类,然后在延迟后删除该类。这与CSS过渡相结合将实现动画效果,而无需用户按住鼠标按钮。
CSS的唯一变化来自:
.button:active { padding-top: 7px; text-shadow: 0 0 0 #3b6e62; }
to(注意“按下”类而不是活动的伪类):
.button.pressed { padding-top: 7px; text-shadow: 0 0 0 #3b6e62; }
仅限JavaScript
document.addEventListener('DOMContentLoaded', function () {
var buttons = document.querySelectorAll('DIV.button');
for (var i = 0, max = buttons.length; i < max; i++) {
buttons[i].addEventListener('click', addPressedClass);
}
function addPressedClass(e) {
var btn = e.target;
btn.classList.add('pressed');
setTimeout(function () {
btn.classList.remove('pressed');
}, 400);
}
}, false);
<强>的jQuery 强>
$(function () {
$('DIV.button').click(function () {
var $btn = $(this);
$btn.addClass('pressed');
setTimeout(function () {
$btn.removeClass('pressed');
}, 400);
});
});
我在尝试模拟时需要做同样的事情
http://www.google.com/design/spec/components/buttons.html#buttons-main-buttons