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の1つのクラスの名前を次のように変更しました

.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; }

to (アクティブな疑似クラスの代わりに「押された」クラスに注意してください):

.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 の Material Button Effect:

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

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

于 2014-07-02T22:32:45.183 に答える