引导轮播显示动画只在第一张幻灯片 [英] Bootstrap carousel shows animation only in first slide
本文介绍了引导轮播显示动画只在第一张幻灯片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的引导传送带有4个幻灯片和所有的人都动画图，但动画只会出现在第一张幻灯片。
我如何确保图表动画为3张幻灯片的其余部分也看到了？
My bootstrap carousel has 4 slides and all of them have animated charts but the animation is seen only in first slide. How do I ensure that the chart animations for the rest of the 3 slides are also seen?
code：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="trycarousel.aspx.cs" Inherits="trycarousel" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css-sheets/bootstrap.css">
<script src="css-sheets/jquery.min.js"></script>
<script src="charts/ChartNew.js"></script>
<script src="css-sheets/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<canvas id="canvas_Pie1c" height="500" width="1000"></canvas>
</div>
<div class="item">
<canvas id="canvas_Pie2c" height="500" width="1000"></canvas>
</div>
<div class="item">
<canvas id="canvas_Pie2c" height="500" width="1000"></canvas>
</div>
<div class="item">
<canvas id="canvas_Pie2c" height="500" width="1000"></canvas>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="color:white"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script>
var mydata2 = [
{
value: 0.39,
color: "#18a5a5 ",
title: "A"
},
{
value: 10.13,
color: "#3f51b5",
title: "B"
},
{
value: 44.29,
color: "#df982f",
title: "C"
},
{
value: 45.19,
color: "#668f4a",
title: "D"
}
];
var startWithDataset = 1;
var startWithData = 1;
var opt1c = {
animationStartWithDataset: startWithDataset,
animationStartWithData: startWithData,
animateRotate: true,
animateScale: false,
animationByData: "ByArc",
animationSteps: 50,
canvasBorders: false,
canvasBordersWidth: 3,
canvasBordersColor: "black",
legend: true,
inGraphDataShow: true,
animationEasing: "linear",
annotateDisplay: true,
spaceBetweenBar: 5,
graphTitleFontSize: 18
}
window.onload = function draw() {
var myPie = new Chart(document.getElementById("canvas_Pie1c").getContext("2d")).Pie(mydata2, opt1c);
var myPie = new Chart(document.getElementById("canvas_Pie2c").getContext("2d")).Pie(mydata2, opt1c);
}
</script>
</form>
</body>
</html>
我试过这样：
<一个href=\"http://wenda.baba.io/questions/4163645/bootstrap-carousel-start-css-animation-after-slide-is-complete.html\" rel=\"nofollow\">http://wenda.baba.io/questions/4163645/bootstrap-carousel-start-css-animation-after-slide-is-complete.html
所以，我修改了code到this.I不敢肯定是否后我的地址只是question.I想在每一个为$ P $只psently发生第一张幻灯片的幻灯片中显示的动画。
So,I modified my code to this.I am not sure whether that post addresses my question.I just want animation to be shown in each slide which is presently happening only for the first slide.
根据上述文章我修改code是：
My modified code according to the above article is :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
<link rel="stylesheet" href="css-sheets/bootstrap.css">
<script src="css-sheets/jquery.min.js"></script>
<script src="charts/ChartNew.js"></script>
<script src="css-sheets/bootstrap.min.js"></script>
<style>
body {padding-top:80px;}
.inactive{opacity:0;}
body {padding-top:80px;} .inactive{opacity:0;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container" style="max-width:900px;">
<div id="carousel-example-captions" class="carousel slide bs-docs-carousel-example">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li class="" data-target="#carousel-example-captions" data-slide-to="1"></li>
<li class="" data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<canvas id="canvas_Pie1c" height="500" width="1000"></canvas>
</div>
<div class="item " id="z1">
<canvas id="canvas_Pie2c" height="500" width="1000"></canvas>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/bootstrap3/bootstrap-master/dist/js/bootstrap.js"></script>
<script>
function transitions() {
var j = 1;
for (var i = 1; i <= 4; i++) {
setTimeout(
function () {
if (!$.support.transition) { $('#z' + i).removeClass('inactive') }
else
{
$('#z' + j).addClass('animated').addClass('fadeInLeft');
$('#z' + j).one($.support.transition.end, function () { $('#z' + i).removeClass('inactive') }).emulateTransitionEnd(2000);
}
j++
},
2000 * (i - 1));
}
}
$('.carousel').carousel();
$(".carousel").on('slid.bs.carousel', function (evt) {
if ($(this).find('.active').index() == 1) {
$(this).carousel('pause');
/* run your transitions */
transitions();
var that = $(this);
/*restart your carousal */
setTimeout(function () {
that.carousel('next');
that.carousel('cycle');
/* hide transitions again */
$("#slide2 [id^='z']").removeClass().addClass('inactive');
}, 2000 * 5);
}
});
</script>
仍然没有工作：/
Still not working :/
我可能错过了一些非常简单的/愚蠢。这是我第一次尝试javascript.Please帮助。
I may be missing out something very simple/stupid. This is my first try at javascript.Please help.
推荐答案
您正在创建的图表动画上的window.onload .Copy同为下滑。 bs.carousel 事件。检查下面的代码片段。
You are creating the chart animation on window.onload.Copy the same to slid.bs.carousel event. Check the below snippet.
$(".carousel").on('slid.bs.carousel', function (evt) {
var myPie = new Chart(document.getElementById("canvas_Pie1c").getContext("2d")).Pie(mydata2, opt1c);
var myPie = new Chart(document.getElementById("canvas_Pie2c").getContext("2d")).Pie(mydata2, opt1c);
});
这篇关于引导轮播显示动画只在第一张幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
