Question

我的页面中有一个简单的bootstrap模式设置，可以点击一下打开：

<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）时，我将有足够的时间选择模态并观察它，所以我知道动画有效。如何在模态窗口打开之前将此过渡延迟到不开始？

Answer 1

尝试触发模态显示的转换

$("#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%");
});

d3转换从页面加载开始，而不是在模态弹出加载时开始

1 个答案: