Переходы CSS перекроют друг друга?

Question

У меня есть два класса col-md-6, и каждый из них содержит кнопку в нем, после нажатия im, используя 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;