0

我正在尝试向引导轮播添加一些简单的动画。代码如下：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">                
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active"><img src="img/form3-1.jpg" alt="Chania"></div>
                    <div class="item"><img src="img/form3-2.jpg" alt="Chania"></div>
                    <div class="item"><img src="img/form3-3.jpg" alt="Flower"></div>
                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>

我想做的是在 10 秒内使活动幻灯片从 1 缩放到 1.5。CSS如下：

#myCarousel .active > img{transform:scale(1.5); -webkit-transform: scale(1.5); -webkit-transition: -webkit-transform 10s ease-out;-moz-transition: -moz-transform 10s ease-out;transition: transform 10s ease-out;}

我知道 HTML 和 CSS 是正确的。但是当页面加载时，出现的第一张幻灯片不会缩放，但是一旦更改了该幻灯片，其余的就可以正常工作了。即使我再次回到第一张幻灯片，它也会再次起作用。我需要的是在第一次加载时修复第一张幻灯片的动画。

4

2 回答 2

1

您的代码工作正常。window load时间active class是默认状态。默认状态下，您不会看到animation.

我创建了片段并设置data-interval="false"了停止轮播动画。加载完成后，如果您使用left和right轮播控件，您将看到动画。您的第一张click left或right将是第一张幻灯片。

默认状态不是第一张幻灯片。

#myCarousel .active > img{
  transform:scale(1.5);
  -webkit-transform: scale(1.5);
  -webkit-transition: -webkit-transform 10s ease-out;
  -moz-transition: -moz-transform 10s ease-out;
  transition: transform 10s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active"><img src="http://placehold.it/1920x1080" alt="Chania"></div>
                    <div class="item"><img src="http://placehold.it/1920x1080" alt="Chania"></div>
                    <div class="item"><img src="http://placehold.it/1920x1080" alt="Flower"></div>
                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>

我希望它会帮助你。

注意：data-interval="false"如果要自动播放，应从生产站点中删除。（不要设置data-interval="true"为自动播放）。

于 2017-01-30T09:10:03.990 回答
1

您可以使用关键帧 - 只需使用您需要的动画

#myCarousel .active > img {
 -webkit-animation: bummer 10s;
  animation: bummer 10s;
 -webkit-transform: scale(0,0); 
 transform: scale(0,0);
}

@-webkit-keyframes bummer {
 100% {
  -webkit-transform: scale(1.5); 
 }
}

@keyframes bummer {
 100% {
  transform: scale(1.5); 
  }
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active"><img src="http://placehold.it/1920x1080" alt="Chania"></div>
                    <div class="item"><img src="http://placehold.it/1920x1080" alt="Chania"></div>
                    <div class="item"><img src="http://placehold.it/1920x1080" alt="Flower"></div>
                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>

于 2017-01-30T09:39:50.480 回答