Question

我可以使用回调

将此CSS Animation应用于Bootstrap Tour

function onShow:function (tour) { 
    // before show next step, addClass animate into the Bootstrap popover
}

Answer 1

我知道这个问题有点老了，但您仍然无法添加其他动画。

我已经创建了一个小解决方法，将Animate.css中的每个动画集成到您的Bootstrap之旅中：

只需使用巡视配置中的onHide和onShow功能。

onHide: function(tour){
    $(".tour-"+tour_name).addClass('animated fadeOutRight');
},
onShown: function(tour){
    $(".tour-"+tour_name).css("opacity","0");
    setTimeout(function(){ //To be sure that it is on the right place
        $(".tour-"+tour_name).css("opacity","1");
        $(".tour-"+tour_name).addClass('animated fadeInLeft');
    }, 320); //Increase here the number if the positions are wrong
},

同样重要的是，您要为animation到false的每一步设置。

{
    element: "#bst_element",
    title: "Foo title",
    content:"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
    placement:"left",
    backdrop: false,
    animation: false //<-- Set to false
}

我希望这个问题也可以帮助其他用户。

Bootstrap之旅和动画

1 个答案: