特定の時刻に純粋なjavascriptを使用してDiv Boxを移動するだけです

私はこの問題を見ました Moving Div Box using javascript トップupvote答えが良いです。特定の時刻に純粋なjavascriptを使用してDiv Boxを移動するだけです

しかし、私がCSS3のような幕開けを得たいのであれば、どうすればいいですか？

.cuble{ 
 
\t height: 100px; 
 
\t width: 100px; 
 
\t background-color: blue; 
 
\t transition: all 3s ease-in-out; 
 
} 
 

 
.cuble:hover{ 
 
\t transform: translateX(500px); 
 
}

<!Doctype html> 
 
<html> 
 

 
<body> 
 
<div class="cuble"> 
 
</div> 
 

 
</body>

私は効果.Iは一度だけのdivをホバーしたいと私はdiv要素をマウスアウト場合でも、div要素にもなるまで左から右に移動しますやすさ・イン・アウトは必要ありません。設定時間。しかし、Moving Div Box using javascriptは要件を満たしていません。

私はここに私のJavascriptのコードで、目標を達成するために約束を使用するようにしてください。

var cuble = document.querySelector('.cuble'); 
cuble.onmouseover = function(e) { 
for (var i = 0; i < 100; i++) { 
    var pixels = 5 * i + "px"; 
    delay(100) 
     .then(() => cuble.style.marginLeft = pixels) 
    } 
} 

function delay(t) { 
return new Promise(function(resolve) { 
    setTimeout(resolve, t) 
    }); 
};

がどのように私は私のJavascriptのコードを修正することができ（とにかく、多分私はちょうどJavaScriptの非同期パフォーマンスについて深く学びたいです）要件を満たしていますか？

出典

2017-03-29 zhang olve

次のようなものを試してください： '.wrapper：hover .cubicle'。キュービクルが動いているときにラッパーにマウスオーバーしています – Sysix

私はCSSについて何か使いたいとは思わない、もし私がただの出来事をしたいのであれば、私はJavaScriptを使わずにCSS3を使うことができます。動作しません。 –

問題はほぼ100msの遅延でそれぞれ約100回の約束を作成しているので、ほぼ即座に発砲します。

問題を解決する1つの方法は、後続の約束ごとに遅延を増やすことです。また、各解決に対応するピクセルを渡す必要があります。代わりに、すべてのステップのための新しい関数を作成するのがない約束、ちょうど一つの関数作成と呼ばれている、との

var cuble = document.querySelector('.cuble'); 

cuble.onmouseover = function(e) { 
    for (var i = 0; i < 100; i++) { 
    var pixels = 5 * i + "px"; 

    delay(i * 20, pixels) 
     .then((p) => cuble.style.marginLeft = p) 
    } 
} 

function delay(t, pixels) { 
    return new Promise(function(resolve) { 
    setTimeout(() => resolve(pixels), t) 
    }); 
};

DEMO

例：ような何か

var cuble = document.querySelector('.cuble'); 

cuble.onmouseover = function() { 
    var left = 0, 
     ival = setInterval(move, 5); 

    function move() { 
    if (left === 500) clearInterval(ival); 
    cuble.style.marginLeft = left++ + 'px'; 
    } 
}

DEMO

出典

2017-03-29 14:45:21

ありがとうございました。これは私が欲しいものです。私はそれから学びます。 –

この例は学習には適していますが、実生活ではループ内で関数を作成することはお勧めしません –

申し訳ありませんが、約束を使わずに別の解決策を提示できますか？ –

特定の時刻に純粋なjavascriptを使用してDiv Boxを移動するだけです

答えて

関連する問題