[英]d3 transition begins on page load instead of on modal popup load
我的页面中有一个简单的引导程序模式集,可以单击打开:
<h4><a data-toggle="modal" data-target="#myModal">Modal Page</a></h4>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- etc -->
在那个模态中,我有一些带有动画的d3条。 这在JS文件中:
var width = 100, height = 20;
d3.select("#thing").append('svg')
.attr('width', "100%")
.attr('height', 15)
.append('rect')
.attr("width", 0)
.transition().duration(750).ease("linear")
.attr('width', "100%")
我的问题是此转换从页面加载开始,而不是在打开弹出窗口时开始。 当我将持续时间设置为较高的值(例如7500)时,我将有足够的时间来选择模态并观看它,所以我知道动画的效果。 我如何才能延迟此过渡直到模态窗口打开才开始?
尝试触发模态秀的过渡
$("#myModal").on('shown', function(){
var width = 100, height = 20;
d3.select("#thing").append('svg')
.attr('width', "100%")
.attr('height', 15)
.append('rect')
.attr("width", 0)
.transition().duration(750).ease("linear")
.attr('width', "100%");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.