A have a carousel with div that adjusts its height each time the slide changes. The transition, however, is not smooth at all, the borders just jump in and out. How can I make it nice and smooth using css or jQuery? I was thinking about using jQuery's "blind" animation, but I have no idea how to set it up.
Adding "transition: height 2s;" to the div's css rule doesn't do the job either.
.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 height transitions don't work when the property is set to auto. You need to manually change the height of your fieldsetSpecs div in order for the transition to work. Fortunately, this is very easy to do since you can listen to the slide.bs.carousel event and change the height of your element accordingly. Add this to your page:
<script>
$('#myCarousel2').on('slide.bs.carousel', function (event) {
$('.fieldsetSpecs').height($(event.relatedTarget).height());
})
</script>
and you're good to go!