添加内容后如何平滑div高度变化

Posted 2023-05-08

【中文标题】添加内容后如何平滑div高度变化

【英文标题】：How to smoothen div height change after adding content

【发布时间】：2019-01-16 23:28:04

【问题描述】：

A 有一个带有 div 的轮播，每次幻灯片更改时都会调整其高度。然而，过渡并不顺利，边界只是跳进跳出。如何使用 css 或 jQuery 让它变得又好又流畅？我正在考虑使用 jQuery 的“盲”动画，但我不知道如何设置它。

添加“过渡：高度2s;”对 div 的 css 规则也不起作用。

.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>  
  

【参考方案1】：

当属性设置为自动时，CSS 高度过渡不起作用。您需要手动更改 fieldsetSpecs div 的高度才能使转换生效。幸运的是，这很容易做到，因为您可以监听slide.bs.carousel 事件并相应地更改元素的高度。将此添加到您的页面：

<script>
     $('#myCarousel2').on('slide.bs.carousel', function (event) 
         $('.fieldsetSpecs').height($(event.relatedTarget).height());
     )
</script>

你很高兴！

【讨论】：

解决方案效果很好，非常感谢！还有一件事：字段集现在可以完美地动画，但是在它滑动之后，文本会稍微超出字段集的内容，并且非常接近底部边框。我该如何解决这个问题，以使文本始终保持在字段集的最中心 - 就像加载页面时一样，在第一张幻灯片更改之前？

只需在 Javascript 中的 fieldsetSpecs div 中增加一点高度。尝试从多 30 个像素左右开始。

好的，加了 30 就可以了。最后一个问题：我能做些什么来让这个旋转木马在 safari 上运行良好吗？我的朋友在 mac 上检查了它，每次幻灯片更改时，fieldset 的边界都会被吹到视口之外。我没有野生动物园，所以我很难检查出来

不幸的是，我也不使用 Safari，所以对此我无能为力。对不起！