1

1つの特定のCSS3トランジションで少し問題があります（ここ）

ビデオの「スライダー」タイプのもの...タイトルの1つにカーソルを合わせると、ビデオに埋め込まれたポップアップが表示されます。しかし、それは下にスライドしません！そして、私には理由がわかりません！これはこの記事から構築されています（ビデオとワードプレスループ用に変更されています）。

私のHTMLは次のとおりです。

<div id="slider">
<div class="empty">
<!--IMG link here for background image-->
</div>

<?php $currentID = get_the_ID();
$args = array( 
  'post_type' => 'portfolio', 
  'cat' => 5,
  'posts_per_page' => 4, 
  'post__not_in' => array($currentID) 
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>

<a href="<?php the_permalink(); ?>">
<div class="related">
    <div class="each">
   <h2><?php the_title(); ?></h2><br>
   <p><?php getCustomField('vid-intro'); ?></p>
</div>
</div>

<div class="home_video">
<div class="video">
    <?php getCustomField('embed_url'); ?>
</div>
</div>  
</a>

<?php endwhile; ?>                      
</div>

そしてCSS：

#slider { max-width: 942px; height: 360px; margin: 2em auto 1em auto;
      box-shadow: 0px 0px 1em #999; position: relative; overflow: hidden; }

a .home_video { 
width: 642px; 
height: 360px; 
position: absolute;
top: 360px;
z-index: -1;
-webkit-transition: top .5s ease;
-moz-transition: top .5s ease;
-o-transition: top .5s ease;
-ms-transition: top .5s ease;
transition: top .5s ease;
}

a:hover .home_video {
top: 0px;
z-index: 0;
}

トランジションを配置する場所、および.home_video divに名前を付ける方法（タグの有無にかかわらず）のさまざまなバリエーションを試し、ホバー状態と非ホバー状態の両方にトランジションを配置しようとしましたが、私の他のすべてのCSS3エフェクトはそうですが、それを元に戻します。

アイデアはありますか？ありがとう

4

1 に答える 1

1

これを変える ：

-webkit-transition: top .5s ease;
-moz-transition: top .5s ease;
-o-transition: top .5s ease;
-ms-transition: top .5s ease;
transition: top .5s ease;

これに：

-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;

それが役立つことを願っています...

于 2012-09-12T13:05:23.533 に答える