引导/ jQuery淡入淡出转换不起作用

我试图引导支持添加到现有的jQuery/CSS的网站。除了实现引导更改，我必须修复一堆格式 - 它似乎正在影响我拥有的弹出过渡，似乎无法弄清楚。我希望你能帮忙，谢谢！

通过定期的jQuery/CSS（没有UI），我创造，我弹出一个模式对话框。

BEFORE自举 - 在弹出框（即，不透明度/阿尔法）将“褪色”。但是，在添加引导程序.css/.js之后 - 现在它只是使背景变灰并且完全不透明。

我该如何解决？

这是一个只用CSS工作代码/ jQuery的

<div class=sample-dialog> 
    <div class=modal-overlay> 
    <div class=modal-content> 
     <div class=modal-body> 
     random content 
     </div> 
    </div> 
    </div> 
</div>

然后jQuery的弹出代码，我叫

function showModal() { 

var m = $('.sample-dialog'); 
var o = m.find('.modal-overlay'); 
var c = m.find('.modal-content'); 
var b = c.find('.modal-body'); 

m.css('display','block'); 

o.animate({'opacity':.8},350); 
b.animate({'opacity':1,'margin-top':0},350,function() { 
    c.css('overflow-y','auto'); 
}); 
}

这个 “作品” 只用了jQuery/CSS。

但是，只要我添加引导程序的.js/.css文件在我的头，在确切相同的过渡现在显示没有不透明度（仅显示为灰色背景）。

关于如何解决任何想法？

作为第二件事情 - 我也注意到一个与引导文件添加，过渡似乎是“震荡”，而不是漂亮的“平滑”一个我了。如果你也有这方面的见解，那就太棒了！

非常感谢！

来源

2017-08-23 user6262902

那么....首先，除非你没有显示所有的代码。不知道变量o.animate会做什么。没有？没有o定义。但除此之外，可能会将您的自定义模式的类重命名为不由引导程序声明的内容。因此，将模态主体，模态内容重命名为其他内容。否则，它会使用任何设置bootstrap有 – KyleK

对不起。我试图在这里保持“缓和”并编辑出任何不必要的代码 - 并意外删除了这些代码。我现在更新了它。 o只是一个外部div类。 – user6262902

好吧...做一些'快速'测试 - 有趣的 - 不知道bootstrap是使用'模态重叠'类，等等（只是重新命名那些'种'修复了一些东西 - 但我有更多的CSS比只是该代码剪辑）。所以问题：有没有反正能够使用我现有的代码，而不必重命名100的变量名称（在CSS中，我的.js代码等），以防引导程序“可能”引用变量名？我确实有bootstrap .css（我的第二，所以我认为它会覆盖启动.css） – user6262902

这可能是引导过渡的规则创建冲突，我记得4.0.0-alpha.6版本的工作是不可能的修改高度的模型的转变。

这将是过渡模式的默认值（与.fade类）

_transitions.scss

.fade.show { 
    opacity: 1; 
} 
.fade { 
    opacity: 0; 
    -webkit-transition: opacity 0.15s linear; 
    -o-transition: opacity 0.15s linear; 
    transition: opacity 0.15s linear; 
    transition-property: opacity; 
    transition-duration: 0.15s; 
    transition-timing-function: linear; 
    transition-delay: initial; 
}

这个我想可以帮助你;

启用各种组件

$enable-transitions: true (default) or false

Documentation [email protected] /Customizing variables

很抱歉，如果引导版本不利于预定义的转换，但它是我使用过的唯一版本。

来源

2017-11-18 21:40:13 Enmanuel

引导/ jQuery淡入淡出转换不起作用

回答

相关问题