0

JavaScript と CSS3 を使用してフェードアウトとフェードインを作成しようとしています。目標は、クリックすると div の幅が縮小し、それに含まれるテキストが同時にフェードアウトするようにすることです。その後、もう一度クリックすると、div が元の幅に戻り、テキストがフェード インします。

HTMLは次のとおりです。

<div id="box1" onclick="slide1()">
<p class="fader">Lorem ipsum.</p>
</div>

CSSは次のとおりです。

  #box1 {
position:relative;
left:0%;
top:0%;
width: 70%;
height: 100%;
background-color: #666;
z-index:4;
}

これがJavaScriptです：

var box1
var fader

window.onload = function() {
    box1 = document.getElementById('box1');
    fader = document.getElementsByClassName('fader');
    } 

function slide1(){

if(box1.style.width=='10%'){
box1.style.width='70%';
fader[0].style.opacity='1';
fader[0].style.transition='opacity 0.25s ease-in';
    }
 else {
    box1.style.width='10%';
 fader[0].style.opacity='0';
    fader[0].style.transition='opacity 0.75s ease-in';
 }
}

フェードアウトでは機能しますが、フェードインでは不透明度0から不透明度1にすぐに移行します...フェードインはありません。何か案は？

4

2 に答える 2

0

Firefox や Opera も使用していると思いますか？これらのブラウザーではトランジションに webkit-prefix が必要なため、あなたのコードはサファリやクロムでは機能しないと思います。次のコードを使用して、移行サポートを取得できます。

var transform = (function () {
    var transforms = [
        'OTransform',
        'MozTransform',
        'msTransform',
        'WebkitTransform'
        ], transform = 'transform';

    while (transform) {
        if (document.body.style[transform] === undefined) {
            transform = transforms.pop();

        } else {
            return transform;

        }

    }

    return false;

}());

CSS トランジションを使用しているときは、トランジション スタイルを変更してから、他のスタイルを変更する前にブラウザで変更を更新することがあります。タイムアウトでこれを行うことができます。一部のブラウザーでは、そうしないとアニメーションが機能しないことに気付きました (一部の Firefox ブラウザー)。

fader[0].style.transition='opacity 0.75s ease-in';
setTimeout(function () {
    box1.style.width='10%';
    fader[0].style.opacity='0';
}, 4);
于 2012-12-16T20:56:26.190 に答える
0

私は実際に、同じ問題で非常によく似た質問をしました:不透明度効果は 1.0 から 0 まで機能しますが、 0 から 1.0 までは機能しません。チェックアウトして、それがあなたのために働くかどうかを確認してください.

それ以外の場合は、スタイル宣言を追加する代わりに、フェーダー要素にクラスを追加してみてください。次に、実際の CSS で、フェーダー要素遷移のコードを記述します。

于 2012-12-17T02:05:08.963 に答える