1

ユーザーがフォームに変更を加えた場合にのみ、フォームsubmitとボタンを表示しようとしています。reset私の元の方法は簡単です。hiddenページの読み込み時にボタンにクラスを追加し、フォームが変更されたときにそれを削除します。これは十分に機能します。しかし、ミックスにトランジションを追加すると、最初hiddenにページの読み込み時にクラスを追加したときにトランジションが発生しますが、これは望ましくありません。

関連するコードは次のとおりです（または jsfiddle でライブを参照してください）：

html

<form>
    <input type="text" />
    <input type="submit" value="Save" />
    <input type="reset" value="Reset" />
</form>

CSS

input[type=submit], input[type=reset] {
    transition: all 0.6s ease-in-out;
    &.hidden {
        opacity: 0;
    }
}

javascript (JQuery 1.9.1 を使用)

$(document).ready(function () {
    var buttons = $('input[type="submit"], input[type="reset"]').addClass('hidden');
    $('form').on(
        'change input',
        ':input',
        function () {
            buttons.removeClass('hidden');
        }
    ).on(
        'reset',
        function () {
            buttons.addClass('hidden');
        }
    );
});

hiddenクラスが初めて追加された後にのみトランジションを有効にするにはどうすればよいですか?

4

1 に答える 1

1

トランジションを独自のクラスに移動することもできます。ページの読み込み時に隠しクラスを追加し、タイムアウト後に遷移クラスを追加します。

この場合のタイムアウトは、ブラウザーが非表示クラスの opacity: 0 スタイルを適用/レンダリングできるようにするためのもので、遷移のタイミングはありません。それが発生したら、遷移クラスを追加すると、適用可能な場合は遷移タイミングを使用するためのさらなる変更が発生します。

( jsfiddle ) のようなもの:

$(document).ready(function () {
    var buttons = $('input[type="submit"], input[type="reset"]').addClass('hidden');

    window.setTimeout(function() { buttons.addClass('txclasshere'); }, 0);
    $('form').on(
        'change input',
        ':input',
        function () {
            buttons.removeClass('hidden');
        }
    ).on(
        'reset',
        function () {
            buttons.addClass('hidden');
        }
    );
});
于 2013-07-18T15:28:42.310 に答える