У A есть карусель с div, которая регулирует свою высоту при каждом изменении слайда. Переход, однако, вовсе не плавный, границы просто прыгают туда-сюда. Как сделать это красиво и гладко с помощью css или jQuery? Я думал об использовании «слепой» анимации jQuery, но понятия не имел, как ее настроить.
Добавление «переход: высота 2с;» к правилу css div тоже не работает.
.specs {
height: 100vh;
background: url("https://images.unsplash.com/photo-1505663912202-ac22d4cb3707?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1a078798f813a2aba758a36f972fb0f6&auto=format&fit=crop&w=1500&q=80") no-repeat center center;
background-size: cover;
text-shadow: 1px 1px black;
}
.backgroundSpecs {
padding-top: 7vh;
height: 100%;
width: 100vw;
background-color: rgba(57, 56, 56, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.fieldsetSpecs {
height: auto;
width: 50vw;
border: 2px solid white;
padding: 5% 15% 5% 15%;
color: white;
text-align: center;
display: flex;
justify-content: center;
transition: height 2s;
}
.legendSpecs {
color: white;
width: auto;
border: none;
margin: 0;
padding: 0 5vw 0 5vw;
}
/*karuzela specjalizacji*/
.specs #myCarousel2 .carousel-inner .active {
height: 100%;
background: none;
}
.specs #myCarousel2 {
height: 100%;
}
.specs .carousel-inner {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.specs .carousel-indicators {
top: -10%;
} <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity = "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin = "anonymous">
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity = "sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin = "anonymous">
<div class = "specs" id = "specs">
<div class = "backgroundSpecs">
<div class = "row">
<div class = "col-lg-12 col-md-12 col-sm-12">
<fieldset class = "fieldsetSpecs">
<legend class = "legendSpecs">SPECJALIZACJE</legend>
<div id = "myCarousel2" class = "carousel slide" data-ride = "carousel" data-interval = "10000">
<!--CAROUSEL INDICATORS-->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel2" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel2" data-slide-to = "1"></li>
<li data-target = "#myCarousel2" data-slide-to = "2"></li>
<li data-target = "#myCarousel2" data-slide-to = "3"></li>
</ol>
<!--WRAPPER FOR SLIDES-->
<div class = "carousel-inner" role = "listbox">
<div class = "item active">
<div>
<h4>Sprawy gospodarcze</h4>
<p>kompleksowa obsługa i doradztwo prawne osób fizycznych i prawnych, polskich i zagranicznych, sporządzenie i opiniowanie umów cywilnoprawnych w językach polskim i angielskim, procesy inwestycyjne, wykonanie i nienależyte wykonanie zobowiązań, egzekucja wierzytelności, due dilligence przedsiębiorstw, prawo nowych technologii, tworzenie i rejestracja spółek, wnioski do KRS, obsługa, fuzji, podziałów i przekształceń podmiotów gospodarczych oraz procesów likwidacji.</p>
</div>
</div>
<div class = "item">
<div>
<h4>Sprawy z zakresu prawa pracy</h4>
<p>reprezentacja firm w postępowaniach sądowych z zakresu prawa pracy, doradztwo i reprezentacja pracowników w sporach z pracodawcami, nawiązanie stosunku pracy, wynagrodzenie za pracę i inne świadczenia pracownicze, przywrócenie do pracy, odszkodowanie za nieuzasadnione rozwiązanie umowy o pracę, mobbing, sporządzanie i opiniowanie regulaminów pracy, regulaminów wynagradzania oraz układów zbiorowych pracy, pomoc w rozwiązywaniu sporów zbiorowych ze związkami zawodowymi, odszkodowanie należne z tytułu wypadku przy pracy i choroby zawodowej</p>
</div>
</div>
<div class = "item">
<div>
<h4>Sprawy z zakresu prawa nieruchomości i prawa administracyjnego</h4>
<p>obsługa transakcji sprzedaży, kupna, najmu nieruchomości, wykonywanie audytów prawnych nieruchomości (due dilligence), doradztwo w celu ograniczenia lub eliminacji ryzyk przy zakupie nieruchomości, obsługa transakcji nieruchomości, obsługa prawna wspólnot mieszkaniowych oraz członków wspólnot mieszkaniowych w sprawach dotyczących m.in. służebności, zniesienia współwłasności, eksmisji, robót budowlanych, reprezentowanie przed organami administracyjnymi, w tym przed organami nadzoru budowlanego, organami architektoniczno-budowalnymi w trakcie całego procesu budowlanego, reprezentacja w postępowaniach administracyjnych i sądowo-administracyjnych</p>
</div>
</div>
<div class = "item">
<div>
<h4>Sprawy cywilne</h4>
<p>sprawy o zapłatę, wykonanie/niewykonanie/nienależyte wykonanie umów i zobowiązań , dochodzenie odszkodowań, zadośćuczynień (wypadki komunikacyjne, szkody osobowe, szkody majątkowe), sprawy dotyczące nieruchomości i praw rzeczowych (zasiedzenie, służebności, zniesienie współwłasności nieruchomości, wydanie nieruchomości, ochrona posiadania), spadki (stwierdzenia nabycia spadku, dział spadku, zachowek, testament, wydziedziczenie)</p>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity = "sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin = "anonymous"></script>
<script type = "text/javascript" src = "scripts.js"></script>

Переходы высоты CSS не работают, если для свойства установлено значение auto. Вам нужно вручную изменить высоту вашего блока fieldsetSpecs, чтобы переход работал. К счастью, это очень просто сделать, так как вы можете прослушать событие slide.bs.carousel и соответственно изменить высоту своего элемента. Добавьте это на свою страницу:
<script>
$('#myCarousel2').on('slide.bs.carousel', function (event) {
$('.fieldsetSpecs').height($(event.relatedTarget).height());
})
</script>
и тебе хорошо идти!
Просто добавьте немного больше высоты к div fieldsetSpecs в Javascript. Попробуйте начать с 30 пикселей или около того.
Хорошо, добавил 30, и это прекрасно. И последний вопрос: могу ли я что-нибудь сделать, чтобы эта карусель хорошо работала на сафари? Мой друг проверил это на Mac, и границы fieldset сдуваются за пределы области просмотра каждый раз, когда слайд меняется. У меня нет сафари, поэтому мне сложно это проверить
К сожалению, я тоже не использую Safari, поэтому ничего не могу поделать. Сожалею!
Решение отлично работает, большое спасибо! Еще одна вещь: сейчас набор полей прекрасно анимируется, но после того, как он скользит, текст немного выходит за пределы содержимого набора полей и приближается к нижней границе. Как я могу исправить это, чтобы текст всегда оставался красивым в самом центре набора полей - точно так же, как при загрузке страницы перед сменой первого слайда?