<video width="910" height="544" controls>
<source src="resources/videos/movie1.mp4" type="video/mp4">
</video>
最初は非表示にする必要がある HTML5 ビデオがあるので、スケールアップするために Webkit トランジションを試しました。
vidWrapper {
-webkit-transition: all .5s ease-in-out;
-webkit-transform: scale(0);
}
.vidWrapper.active {
-webkit-transform: scale(1);
また、ビデオを拡大するために使用する .js コードもここにあります。ビデオを表示した後、dom がスケールアップする前にキャッチする必要があるように見えるため、タイムアウトを使用する必要がありました。
setTimeout(function(){
debugger;
scope.m_vidWrapper.addCls('active');
},200,scope)
**setTimeout を削除して、scope.m_vidWrapper.addCls('active'); を呼び出す場合は注意してください。トランジションを開始するには、ビデオが表示されます。0から1にうまくスケールアップしない
、これは Chrome と Safari では機能しますが、ipad では機能しません。また、表示をなしからブロックに切り替えてみましたが、それでも表示されません。表示しようとしているページを離れると、ビデオが表示されて点滅する場所を見たことがあります。