Question

我已将过渡效果添加到包含视频的容器div中。我得到一个黑屏，视频嵌入应该是。我试过youtube和vimeo并且它们都没有工作，所以我认为它与flash有关。当我对转换设置进行评论时，视频会再次生效。任何想法可能会发生什么以及如何解决它？

编辑：

以下是代码：

<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;
}

Answer 1

好的，我设法让它发挥作用。我只需设置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);

我也使用translateX而不是translate3d，因为我需要它用于隐藏菜单，其中整个内容被移动到左侧。所以我毕竟只需要X坐标。无论如何，默认值需要为1而不是0.这解决了视频的问题。 JSFiddle在这里：http://jsfiddle.net/UrPMj/13/

Answer 2

在我使用您的代码构建的jsFiddle中，似乎没有任何错误。但我也没有看到任何动画。你第一次看到动画然后是播放器吗？

在这里，您可以看到jsFiddle在我的计算机上的显示方式：

enter image description here

我认为您的问题出现在代码中：

-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;

因为如果我做一个简单的动画（一行），它可以正常工作。例如：

.super-container {
  position: relative;
  width: 100%;
  transform:rotate(7deg);
  -ms-transform:rotate(7deg); /* IE 9 */
  -webkit-transform:rotate(7deg); /* Safari and Chrome */
}

收率：

enter image description here

哪个显示完美。您可以查看HERE。

所以我建议你逐行重写CSS3动画并查看它停止工作的位置（现在你有太多的冗余代码可以与其他代码发生碰撞;因此阻止显示iFrame）

视频嵌入和CSS过渡＆amp;变换

2 个答案: