twitter-bootstrap - Bootstrap 导览和动画

Question

我可以使用回调将此CSS 动画应用到 Bootstrap Tour 中吗

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

Answer 1

我知道这个问题有点老了，但是您仍然没有添加其他动画的选项。

我创建了一个小变通方法来将 Animate.css 中的每个动画集成到您的 Bootstrap Tour 中：

只需使用游览配置中的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
},

同样重要的是，您为每一步都设置了animationto 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
}

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