3

JavaScript アニメーションをやめて、代わりに CSS アニメーションを使用しようとしています。現在、jQuery のアニメーション機能を使用しています。

私は素晴らしいCSSアニメーションがたくさんあるこのウェブサイトに出会いました。そのような：

.demo1 {
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}

.demo1:hover {
  -webkit-transform:translate(0px,10px);
  -moz-transform:translate(0px,-10px);
  -ms-transform:translate(0px,-10px);
  -o-transform:translate(0px,10px);
  transform:translate(0px,-10px);
}

私が理解できないのは、これらのアニメーションをプログラムでアクティブにする方法です。たとえば、の代わりに、をhover呼び出して要素を翻訳するにはどうすればよいelem.translate()ですか?

4

3 に答える 3

7

あなたが求めていることを誤解しているかもしれませんが、要素の「翻訳」とは何かについて誤った印象を受けている可能性があると思います. DOM 要素には、「translate」という属性と、css プロパティ「translate」があります。ただし、要素属性「translate」は、要素内のテキストを言語的な意味で翻訳する必要があるかどうかを指定する単なるブール値フラグであり、呼び出し可能な関数ではなく、css プロパティとは何の関係もありません。

それはさておき、要素をプログラムで翻訳する方法はまだたくさんあります。他の何人かの人々は、jQuery でこれを行う方法についてかなり良いアイデアをすでに提供しています。jQuery を使用したくない場合でも、手動でクラスを追加および削除できます (スタイルについても同様です)。

これは、クラスの追加/削除のために作成した例です。非常に簡単ですが、クラスの変更に関連するコードは次のとおりです。

.translator {
  -webkit-transform:translate(0px,100px);
  -moz-transform:translate(0px,-100px);
  -ms-transform:translate(0px,-100px);
  -o-transform:translate(0px,100px);
  transform:translate(0px,-100px);
}
...
function move_box() {
  var the_box = document.getElementById("the-box");
  if (the_box.classList.contains("translator")) {
    the_box.classList.remove("translator");
  } else {
    the_box.classList.add("translator");
  }
}

クラスを適用すると、アニメーションが開始されます (削除すると元に戻ります)。これは、何度でも発生する可能性があります。

1 つの重要な注意: この例では、まだ "transition:all .5s ease-out;" というスタイルを使用しています。何かが起こる前に div に適用されます。これは、アニメーション効果が要素に適用される方法を管理する、単なる普遍的なデフォルトです。これにはいくつかの異なるアプローチがありますが、簡単にするために、このままにしておきます。

それ以外の場合は、次のようにスタイルを直接追加できます。

function move_box() {
  var the_box = document.getElementById("the-box");
  set_translate(the_box, 100);
}

function set_translate(e, pix) {
  e.style["-webkit-transform"] = "translate(0px, "+ pix +"px)";
  e.style["-moz-transform"] = "translate(0px, -" + pix +"px)";
  e.style["-ms-transform"] = "translate(0px, -" + pix + "px)";
  e.style["-o-transform"] = "translate(0px, " + pix  + "px)";
  e.style["transform"] = "translate(0px, -" + pix + "px)";
}

ここでは複雑すぎません。要素のスタイルを操作して、関連する各要素を直接設定します。以前と同様に、遷移スタイルを指定するために別のクラスに依存しています。

個人的にはクラスの追加・削除の方がはるかに優れていると思います。技術的に言えば、スタイルを直接変更する方が柔軟ですが、それが目的の場合は、おそらく jQuery トランジットのような優れたライブラリを使用する必要があります (コメントで述べたように)。ただし、いくつかの既定のエフェクトをプログラムで適用できるようにしたいだけの場合は、その場でクラスを変更するのが優れたソリューションです。

于 2013-02-11T01:07:18.077 に答える
2

すでにCSSを配置している場合は、ホバーイベントをシミュレートすることでjqueryでトリガーする$('.demo1').trigger('hover');か、cssセレクターをからに変更して.demo:hoverその.class-nameクラスを追加することができます。$('.demo').addClass('class-name');

于 2013-02-10T23:33:21.630 に答える
0

を使用jQuery.css.fnして、cssルールを適用できます。

$('.demo1').click(function(){
    $(this).css({
        transform: 'translate(0px,-10px)'
    });
});

または、要素にクラスを追加します。

$('.demo1').click(function(){
    $(this).toggleClass('translate');
});


.translate {
  -webkit-transform:translate(0px,10px);
  -moz-transform:translate(0px,-10px);
  -ms-transform:translate(0px,-10px);
  -o-transform:translate(0px,10px);
  transform:translate(0px,-10px);
}
于 2013-02-10T23:34:34.087 に答える