Question

我有一个推出的推架：

http://jsfiddle.net/dragonfreak1000/jx2jqa39/4/

但是如果我向它添加Bootstrap，实际的小部件就不会生成动画：

http://jsfiddle.net/dragonfreak1000/jx2jqa39/5/

我碰巧知道这个小部件是一个iFrame，但我找不到引导代码中的内容会阻止它运行。这是我的HTML：

<div id = "tweet" class="hidden">
    <a class="twitter-timeline" href="https://twitter.com/twitter" data-widget-id="544215204960038912">Tweets by @twitter</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<img id="twitter-button" src="//codepixl.net/img/Twitter_alt_4.png" align="right"></img>

CSS：

#tweet {
    position:fixed;
    width:500px;
    z-index:999999999999;
    left:calc(100% - 500px);
    transition:left .4s;
    -webkit-transition:left .4s;
    -o-transition:left .4s;
    -moz-transition:left .4s;
    -ms-transition:left .4s
}

#tweet.hidden {
    left:calc(100% - 0px)
}

#twitter-button {
    cursor: col-resize;
    position:fixed;
    border-top-left-radius:50%;
    border-bottom-left-radius:50%;
    left:calc(100% - 75px);
    border:2px solid #fff;
    z-index:99999999999999;
    height:75px;
    transition:left .4s;
    -webkit-transition:left .4s;
    -o-transition:left .4s;
    -moz-transition:left .4s;
    -ms-transition:left .4s
}

#twitter-button.out {
    left:calc(100% - 575px)
}

JS：

$("#twitter-button").click(function(){
    $(this).toggleClass("out");
    $("#tweet").toggleClass("hidden");
});

如何在不删除引导程序的情况下解决此问题？

Answer 1

这是由于类.hidden也在Bootstrap中使用（将元素设置为display: none）。如果您将其重命名为html，css＆amp;中的.tweet-hidden。这是固定的。见http://jsfiddle.net/ckuijjer/t11c8qgo/

Bootstrap使webkit过渡不起作用

1 个答案: