Я столкнулся с довольно причудливым эффектом вращения сумасшедшей газеты Бэтмена , который случайно поворачивал, когда искал сложное модальное решение.Я хотел попробовать это на своем сайте, чтобы посмотреть, как это будет выглядеть, но попытки реализовать это не увенчались успехом, и, похоже, это связано с различиями между Bootstrap (BS) 3 и BS4.
Рабочая скрипка, показывающая работающий BS3 эффект: http://jsfiddle.net/p68bdgL2/
и тот же код с использованием BS4 , который не работает: http://jsfiddle.net/d6uwoz1m/
CSS, который, кажется, приносит эффект в жизнь:
.rotate.in {
transform: rotate(1800deg);
transition: all 1.5s;
}
, поэтому я взял пик в bootstrap /3.1.0 / css / bootstrap.min.css для записей, содержащих « .in », и единственные связанные записи выглядят так:
.fade.in {
opacity: 1
}
.collapse.in {
display: block
}
.modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0)
}
.modal-backdrop.in {
opacity: .5;
filter: alpha(opacity=50)
}
The "transform: translate (0, 0)"выглядел наиболее вероятным кандидатом, поэтому я вставил это в свой код, но он все еще не работал.Поэтому я сделал быстрый поиск, который обнаружил следующий MDN веб-документ , в котором было указано:
" Ваш браузер не поддерживает MathML. Вместо этого был использован запасной вариант CSS."
Таким образом, вместо использования Chrome я переключился на Firefox Developer Edition , который, казалось, преодолел вышеуказанную ошибку, но, к сожалению, не проблема поворота.
Я в полной растерянности относительно того, почему эффект поворота больше не работает. BS4.
Буду признателен за любой совет.
Из любопытства меня также интересует код, касающийся нажатия кнопки
$ (' # openBtn '). Click (function () {$ ('# myModal'). modal ({show: true})});
, которая, по-видимому, вызывает модальное окно, хотя id #openBtn, похоже, не отображается в HTML.Могли бы сделать объяснение, чтобы понять эту логику.