我的页面中有一个简单的引导模式集,点击即可打开:
<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%");
});