5

本当にシンプルなスライダーを作ろうとしています。アニメーションとjsにCSS3トランジションを使用して、animate-inクラスとanimate-outクラスを個々のフレームに順番に適用したいと思います。

私はここでjsfiddleの基本的な意図された機能の実用的なデモを書きました：http：//jsfiddle.net/7myKg/3/

とても簡単です。フレームは、animate-inクラスを適用することでアニメーション化され、animate-outクラスを適用することでアニメーション化されます。たとえば、これは2番目のフレームを表示します。

<div class="slider" id="slider">
    <ul>
        <li id="frame1" class="animate-out"><p>one</p></li>
        <li id="frame2" class="animate-in"><p>two</p></li>
        <li id="frame3"><p>three</p></li>
    </ul>
</div>​

アニメートする前に、フレーム内でリセットされていることを確認する必要があります。フレームはリセット状態に移行してはなりません。これを実現するために、フレームにインラインスタイルを追加して、アニメーションアウトクラスを削除する前に、遷移期間を0に設定しています。これは現在、Chromeで意図したとおりに機能します。私が抱えている問題は、DOMが要素のスタイルへの変更を反映する前にFirefoxがanimate-inクラスを適用しているように見えることです。これにより、要素/フレームが逆方向に遷移します。説明するよりもFirefoxでデモを実行する方が見やすいです。動作を期待していた方法をデモするために、遅延を伴うsetTimeoutラップを追加しました。

私は何が欠けていますか？FirefoxがDOM要素を即座に更新しないのはなぜですか？

私はこれを学習体験としてゼロから構築しており、それは奇妙な問題だと思ったので、解決できると思いました。少なくとも現時点では確かに、本番用ではありません。このため、既存の多くのソリューションやプラグインの1つを使用したくありません。

注：これは私の最初の質問なので、将来、より良い質問をする方法について何か間違ったことをした場合の建設的なヒントをいただければ幸いです。

ありがとうございました。

4

1 に答える 1

2

-moz-transition：left

私はいじり始めましたが、きれいなページから始めることを好みます。

飛び出す最初の問題は、-moz-transition:そのまま省略されることです-o-transition:。私は今とても疲れていて、本当にそれを調べるのに悩むことはできませんが、最後にチェックしたとき、すべてのブラウザーにはまだ独自のプレフィックスが必要であり、IE（9）はまだトランジションをサポートしていません。

編集：どうやらFF16以降、-moz-プレフィックスは必要ありません。

第二に、CSS宣言で、移行するスタイルプロパティを指定していません。すなわち-moz-transition:left 1s;。

第三に、情報の有用性はわずかだと思ったので、詳細を思い出せませんが、引数を運ぶsetTimeoutについては、遍在的に安定していないと読んだことを思い出します。どこかでdeveloper.mozillaで読んだことがあるかもしれません。このあたりのどこかにいたかもしれません。

編集：通常はIE固有です。私はまだ単純な無名関数を使用します。

私が言うように、私はコードをいじり始めましたが、書き直したいと思います。

私も言うように、私はとても疲れている（睡眠の近く）ので、今はそれをしませんが、明日はそうするかもしれません。それまでの間、これら3つのポイントを修正してみてください。

アップデート

投稿編集（私は-moz-接頭辞について正しかった:-)

私は自分自身を助けることができませんでしたJsFiddle

HTML

<div>
    <input type="checkbox" id="overflowHidden"><p>overflow: hidden</p>
    <button id="next">Next</button>
</div>
<div class="slider">
    <ul id="slider" class="a">
        <li id="frame3"><p>three</p></li>
        <li id="frame1"><p>one</p></li>
        <li id="frame2"><p>two</p></li>
    </ul>
</div>​

CSS

input {
    display:inline-block;
    margin:10px 0px 0px 10px;
}
button {
    display:inline-block;
    margin:0px 0px 0px 10px;
    vertical-align:2px;
}
p {
    display:inline-block;
    margin:0px 0px 0px 5px;
    vertical-align:2px;
}
.slider {
    margin: 2em auto;
    padding: 0;
    width: 200px;
    height: 200px;
}
#slider {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: relative;
    width: 100%;
    height: 100%;
}
.slider li {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0%;
    -o-transition:left 1s ease-in-out;
    -webkit-transition:left 1s ease-in-out;
    -moz-transition:left 1s ease-in-out;
    transition:left 1s ease-in-out;
}
#frame1 {
    background:#e08080;
}
#frame2 {
    background:#e0e080;
}
#frame3 {
    background:#8080e0;
}
#slider.a #frame1{
    left: 0%;
}
#slider.a #frame2{
    left: -100%;
}
#slider.a #frame3{
    left: 0%;
}
#slider.b #frame1{
    left: 0%;
}
#slider.b #frame2{
    left: 0%;
}
#slider.b #frame3{
    left: -100%;
}
#slider.c #frame1{
    left: -100%;
}
#slider.c #frame2{
    left: 0%;
}
#slider.c #frame3{
    left: 0%;
}

JavaScript

(function () {
    window.addEventListener("load", function () {
        var slider = document.getElementById("slider");
        document.getElementById("next").addEventListener("click", function () {
            var c = slider.getAttribute("class");
            c = c === "a" ? "b" : c === "b" ? "c" : c === "c" ? "a" : c;
            slider.setAttribute("class", c);
            slider.appendChild(slider.getElementsByTagName("li")[0]);
        }, false);
        // adding a toggle for overflow just for demo
        document.getElementById("overflowHidden").addEventListener("change", function () {
            if (this.checked) {
                slider.style.overflow = "hidden";
            } else {
                slider.removeAttribute("style");
            }
        }, false);
    }, false);
}());

もちろん、この種のことを達成するための多くの異なる方法があります。原則として、私は特定の方法を使用して特定の方法で何かを機能させるのではなく、自分が欲しいものを想像し、そこから構築することから始めます。

JavaScriptによって行われる作業の大部分は、複数の要素を使用せずに、@keyframesを使用してCSSに渡すことができます。しかし、それは常に正確な状況に依存しますね？

ただし、必要なのは2つの色のパネルだけであり、そのうちの1つが背景である可能性があることを考慮してください。これにより、1つの要素のみを移動する必要があります（スライドさせて、背景を同じ色に設定し、トランジションなしで送り返し、色を変更すると、再びスライドできるようになります）。

学習のための小さなプロジェクトはとても楽しいですが（私は知っています）、それらは少し制御不能になる可能性があり、時には私たちが学んだすべてのものを取り除き、基本に戻るのは良いことです。

私は本当にひいきにするつもりはありません。幸運 ：-）

于 2012-12-11T09:03:45.667 に答える