0

我正在制作一个链接，当点击链接时，它会向下移动几个像素。我希望这是一个动画，所以我添加了 CSS 过渡。现在我遇到的问题是当我按下按钮时，它没有完成动画。只要我按住鼠标按钮，它就会动画。

所以我想要的是链接完成它的动画，然后回到正常位置。（这意味着我不能使用 :visited 因为它不会恢复正常）。

这是我为澄清我的问题而制作的小提琴：

http://jsfiddle.net/SywZV/

这是我正在使用的代码：

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'});
    });
4

2 回答 2

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');
});

看看这个箱子。

在我的示例中，我使用的是 jQuery。需要注意的是，如果你打算只在这个动画中使用它，你最好使用纯Js，而不是包含一个完整的库来实现这样一个简单的效果。

于 2013-01-10T15:41:49.693 回答
1

您可以在单击时向元素添加一个类，然后在延迟后删除该类。这与您的 CSS 过渡相结合将实现动画效果，而无需用户按住鼠标按钮。

您的 CSS 的唯一更改来自：

.button:active { padding-top: 7px; text-shadow: 0 0 0 #3b6e62; }

到（注意类“按下”而不是活动伪类）：

.button.pressed { padding-top: 7px; text-shadow: 0 0 0 #3b6e62; }

仅限 JavaScript

http://jsfiddle.net/SywZV/8/

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

http://jsfiddle.net/SywZV/9/

$(function () {
    $('DIV.button').click(function () {
        var $btn = $(this);
        $btn.addClass('pressed');
        setTimeout(function () {
            $btn.removeClass('pressed');
        }, 400);
    });
});

在尝试模拟时我需要做同样的事情

使用 HTML5 和 CSS3 的 Google 材质按钮效果：

http://jsfiddle.net/FBDhR/4/

http://www.google.com/design/spec/components/buttons.html#buttons-main-buttons

于 2014-07-02T22:32:45.183 回答