Question

我有两个col-md-6类，每个类都包含一个按钮，点击后，我使用jQuery到toggleClass()和col-md-6之间的col-md-12并隐藏/显示另一个。我也使用CSS过渡来为切换设置动画，但它适用于一个类，如果我单击另一个按钮，则转换不起作用。

多个类选择器会导致转换问题吗？

.hello, .bye{
   -webkit-transition: width 500ms;
   -moz-transition: width 500ms;
   -o-transition: width 500ms;
   transition: width 500ms;
}

这是jsfiddle

中的问题

Answer 1

你的问题有点模糊，所以我自己动手并对你的代码做了一些必要的修改，以便最终的结果与你（最有可能）在脑海里的内容相似。

CSS备注：

避免 #btn1 和 #btn2 溢出 .hello 和 .bye ，您需要使用 overflow: hidden 。
为了避免在转换过程中包含 .hello 和 .bye ，如果没有足够的空间，则需要使用： padding: 0 。
如果您希望按钮保持在它们的确切位置（15px缩进），请使用： margin-left: 15px 。

CSS代码：

.hello,
.bye {
    padding: 0;
    overflow: hidden;
    -webkit-transition: width 500ms;
    -moz-transition: width 500ms;
    -o-transition: width 500ms;
    transition: width 500ms;
}

#btn1,
#btn2 {
    margin-left: 15px;
}

JS备注：

你的代码效率低，因为你基本上反复重复相同的代码，所以我为你创建了一个可以用于两个按钮的函数。

JS代码：

查看以下完整的JavaScript代码：

Codepen：→here;
jsFiddle：→here;

CSS转换会相互覆盖吗？

1 个答案: