3

だから私はウェブページ上にアニメーションを作成しようとしていて、CSS3を使用してそれを行う方法を見つけようとしていますが、それをどのように行うことができるかについてはかなり混乱しています。

ユーザーがリンク要素をクリックしたときに、divを展開して、クリックしたリンク要素に固有のコンテンツを入力する必要があります。たとえば、ユーザーが「About」というタイトルのリンクをクリックすると、link要素の下のdivが展開され、コンテンツが表示されます。次に、「連絡先」などの別のリンクをクリックすると、「バージョン情報」に固有のコンテンツが消え、「連絡先」に固有のコンテンツが表示され、divのサイズが新しいコンテンツに合わせて変更されます。

これはJavascriptでかなり簡単にできると思いますが、CSS3で行う方が簡単か可能かどうか誰かに教えてもらえますか？

皆さんありがとう。

4

4 に答える 4

1

クリックしてアニメーションをトリガーする最も簡単な方法は、クリック時にオブジェクトにCSSクラスを追加し、そのクラスを持つ任意のオブジェクトに対してCSS3トランジションまたはアニメーションを構成することです。

アイテムを非表示にする2番目のクラスは、同じオブジェクトからそのクラス名を削除できます。

アニメーション/トランジションのすべての詳細は、CSS3スタイルルールで指定されます。クラス名の追加/削除のみがjavascriptで行われます。

CSS3自体は、:hover疑似セレクターを使用してアニメーション/トランジションをトリガーできますが、それ以上の機能はなく、クリックに基づいてアニメーションをトリガーすることはできません。

于 2012-11-09T01:38:47.480 に答える
1

これはCSS3とJavaScriptの質問ではないと思います。アニメーションにCSS3を使用している場合でも、クリックイベントに基づいてアニメーションをトリガーするにはJavaScriptが必要になる可能性があります。

あなたがする必要があることに基づいて、私はいくつかの主なオプションを見ます：

  1. @ jfriend00が言ったように、アニメーションを実行するCSSクラスを追加または削除します。
  2. jQueryのshow、hide、fadeIn、fadeOut、およびanimateAPIを使用します。
于 2012-11-09T01:43:07.857 に答える
1

必要なのは、開発しているものすべてにスパイスを加えるためのジューシーです...間違っていない場合は、CSS3とJqueryのようなものが必要です。

jqueryライブラリを取得し、ページで参照します。これがあなたをジャンプスタートさせるためのスニペットです。

 <a id="home" href="home.html">Home</a> 
<a id="about" href="about.html">About</a> 
<div id="home_div"></div>
<div id="about_div"></div>
    <script type="text/javascript">
        $('#home').click(function () {
            $('html').animate({ scrollTop: 500 }, 1000);
            $('#home_div').animate().show('slow');
            $('#about_div').animate().fadeOut('slow');

            return false;
        });
       $('#about').click(function () {
            $('html').animate({ scrollTop: 500 }, 1000);
            $('#home_div').animate().fadeOut('slow');
            $('#about_div').animate().show('slow');

            return false;
        });
    </script>

効果を他の利用可能なものに変更することができます。

于 2012-11-09T01:49:37.360 に答える
1

すでに述べたように、JavaScriptはこのためのあなたの親友です。しかし、CSS3で可能かどうか尋ねられたので、試してみる必要がありました。基本的に、私が行ったことは、アニメーションをトリガーするためにターゲットセレクターを使用したことです。したがって、リンクをクリックすると、divがコンテンツとともに展開され、別のリンクをクリックすると、新しいコンテンツ（同じ場所に配置されている）を持つ新しいdivが展開され、同じdivが展開されているように見えます。

これは最適なソリューションではなく、この例を非常に迅速に作成したため、希望どおりに機能していませんが、CSSだけでどのように実行できるかについて少なくとも全体像を把握できます。

お役に立てば幸いです。

これがデモで、これが私の例のコードです。

HTML

<a href="#box">Box</a><br /><a href="#boxtwo">Box two</a>
<div id="box">Hello</div>
<div id="boxtwo">Hello again,</div>

CSS

#box, #boxtwo{
    position: absolute;
    top: 50px;
    left: 50px;    
    width: 0px;
    height: 0px;
    background-color: #e3e3e3;
    color: transparent;    
}

#box:target {
      -webkit-animation: expand 1.0s ease-in forwards;
}

#boxtwo:target {
      -webkit-animation: expand 1.0s ease-in forwards;
}

@-webkit-keyframes expand {
      0%   {width: 0px; height: 0px; color: transaprent;}
      50%  {width: 100px; height: 100px; color: transparent;}
      100% {width: 100px; height: 100px; color: #000000;}
}
于 2012-11-09T07:14:32.743 に答える