51

div に特定のクラスが与えられたときに CSS トランジションを行う方法があるかどうか疑問に思っていました。私の最も良い例は、このサイトhttp://ideaware.co/です

下にスクロールしてヘッダーが固定されると、背景色が変わり、不透明になります。本当に見栄えがいい。

私はここにあるテンプレートに取り組んでいますhttp://www.niviholdings.com/collide/そして、私がやりたいのは、 < nav > が修正されたときに、 < ul > を右にスライドさせたいということです。

うまくいけば、私はこれを正しく説明しています。

4

3 に答える 3

48

div に特定のクラスが与えられたときに CSS トランジションを行う方法があるかどうか疑問に思っていました。

できますよ...

document.querySelector('#header').addEventListener('click', function(e) {
    e.target.classList.toggle('transition');
})
#header {
    background: red;
    padding: 10px 0;
    position: relative;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    left:0;
}

#header.transition {
    background: green;
    left: 50px;
}
<div id="header">Click me to toggle class</div>

デモ

于 2013-04-23T18:46:10.193 に答える
16

役立つかもしれない2つのポイント：

autoから固定値への遷移が問題になる場合があります。margin-left最終的には、.main-nav-ulスティッキーな場合だけでなく、 の をデフォルトごとに固定値に設定してみることができます。

2つ目は（そしてこれはハッキーです）。.main-nav-ul遅延にクラスを適用してみてください：

setTimeout(function() {
    $('.main-nav-ul').addClass('nav-slide'); // line 57 in jquery.sticky.js
}, 100);
于 2013-04-23T19:33:05.333 に答える
10

4 つの簡単なステップでの CSS トランジション

  1. やりたいことが CSS トランジションで可能であることを確認してください。W3C docsをチェックすることでそれを行うことができます。

  2. トランジションと開始スタイルを基本要素に追加します。

  3. スタイルが変更されたクラスまたは状態を追加します。

  4. クラスを追加するメカニズムを追加します (該当する場合)。

簡単な例として、 のマージン変更をアニメーション化するとします:hover。これを行うだけです：

element {
  margin-left: 10px;
  transition: margin-left linear .5s;
}

element:hover {
  margin-left: 0;
}

そして、これが簡単なデモです。

于 2013-04-23T18:45:29.637 に答える