2

ビデオを含むコンテナ div にトランジション効果を追加しました。ビデオの埋め込みがあるはずの場所に黒い画面が表示されます。youtube と vimeo の両方を試しましたが、どちらも機能していません。フラッシュが関係していると思います。トランジション設定をコメントアウトすると、ビデオが再び機能します。何が起こっているのか、それを修正する方法はありますか?

編集：

http://jsfiddle.net/bUFXA

コードは次のとおりです。

<div class="super-container">   
<section class="main-content">   
    <div class="container">
        <div class="inner">
            <div class="row">
                <div class="span8">                         
                    <div class="entries">

                        <article id="post-168" class="post-168 post type-post status-publish format-video hentry category-uncategorized category-videos tag-bring-the-noize tag-m-i-a tag-video instock">
                            <div class="entry-header">
                                <div class="video_player">
                                    <iframe width="850" height="478" src="http://www.youtube.com/embed/cCkIYkaLBGs?feature=oembed" frameborder="0" allowfullscreen></iframe>
                                </div><!--video_player-->
                                <div class="video-caption">M.I.A. - Bring The Noize</div>                   
                            </div><!-- .entry-header -->


                            <div class="entry-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu feugiat purus. Quisque urna diam, consectetur sit amet est id, rhoncus sollicitudin odio. Phasellus rutrum tellus vitae tincidunt mattis. Proin lobortis pharetra hendrerit. Vivamus id urna arcu. Pellentesque luctus nulla sapien, vel interdum mi luctus a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu feugiat purus. Quisque urna diam, consectetur sit amet est id, rhoncus sollicitudin odio. Phasellus rutrum tellus vitae tincidunt mattis. Proin lobortis pharetra hendrerit. Vivamus id urna arcu.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu feugiat purus. Quisque urna diam, consectetur sit amet est id, rhoncus sollicitudin odio. Phasellus rutrum tellus vitae tincidunt mattis. Proin lobortis pharetra hendrerit. Vivamus id urna arcu. Pellentesque luctus nulla sapien, vel interdum mi luctus a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu feugiat purus. Quisque urna diam, consectetur sit amet est id, rhoncus sollicitudin odio. Phasellus rutrum tellus vitae tincidunt mattis. Proin lobortis pharetra hendrerit. Vivamus id urna arcu.</p>
                            </div><!-- .entry-content -->
                        </article><!-- #post -->

                        <article> (...) </article>
                        <article> (...) </article>
                        <article> (...) </article>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS:

.super-container {
position: relative;
width: 100%;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
4

2 に答える 2

2

わかりました、私はそれを機能させることができました。translate3d to 1次のような値を設定するだけで済みました。

 -webkit-transform: translate3d(1, 0, 0);
 -moz-transform: translate3d(1, 0, 0);
 -ms-transform: translate3d(1, 0, 0);
 -o-transform: translate3d(1, 0, 0);
 transform: translate3d(1, 0, 0);

また、translate3d の代わりに translateX を使用しました。これは、コンテンツ全体が左に移動する隠しメニューに必要なためです。結局、必要なのは X 座標だけでした。とにかく、デフォルト値は 0 ではなく 1 にする必要がありました。これでビデオの問題は解決しました。JSFiddle はこちら: http://jsfiddle.net/UrPMj/13/

于 2013-07-30T09:31:59.743 に答える