用流暢動畫展開div點擊

Question

我想用速度/流暢動畫展開div。 現在div突然發生變化，我的要求是在擴展的同時給予流暢的動畫。

小提琴代碼：

http://jsfiddle.net/Sharan_thethy/pnjpj3uo/3/

Answer 1

我想你在找什麼是你的切換處理程序更改爲fadeIn()或​​。

在括號中，爲轉換定義時間（默認爲ms，我相信）。

這是處理元素。爲了處理您的小提琴代碼可能會與某些CSS3過渡工作類，雖然它可能不是最好的做法，由於瀏覽器的兼容性：

-webkit-transition: 0.4s ease; 
-moz-transition: 0.4s ease; 
-o-transition: 0.4s ease; 
transition: 0.4s ease; 

Answer 2

這是現代瀏覽器的CSS的解決方案。 （IE10及更高版本）

document.querySelector('a').addEventListener('click', function(){ 
 
    document.querySelector('.smalldesc').classList.toggle('expand'); 
 
});

.smalldesc { 
 
    max-height:52px; 
 
    overflow:hidden; 
 
    transition:all .3s ease; 
 
} 
 

 
.smalldesc.expand { 
 
    max-height:250px; 
 
}

<div class="service-1 click1"> 
 
<div class="row"> 
 
<div class="medium-12 small-12 columns smalldesc"> 
 

 
<p class="font16 ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
</div> 
 
<a href="#">Read More</a> 
 
</div> 
 
</div>

或者事件更好，使用css只：

#expend { 
 
    display:none; 
 
} 
 

 
#expend + .smalldesc { 
 
    max-height:52px; 
 
    overflow:hidden; 
 
    transition:all .3s ease; 
 
} 
 

 
#expend:checked + .smalldesc { 
 
    max-height:250px; 
 
} 
 

 
label { 
 
    color:blue; 
 
    text-decoration:underline; 
 
    cursor:pointer; 
 
} 
 

 
label:hover { 
 
    text-decoration:none; 
 
}

<div class="service-1 click1"> 
 
<div class="row"> 
 
    <input type="checkbox" id="expend" /> 
 
    <div class="medium-12 small-12 columns smalldesc"> 
 
    <p class="font16 ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </p> 
 
    </div> 
 
    <label for="expend">Read More</label> 
 
</div> 
 
</div>

更新：爐排件事max-height是你不知道確切的高度。如果元素的高度小於max-height屬性的值，則元素仍然會得到正確的高度。 max-height屬性只是限制從頂部的高度。

請記住，例如，您不能只設置max-height到10000px。我的意思是，你可以，但你不應該。

1. 當您點擊鏈接後，動畫將如此之快。
2. 現在max-height是10000px。當您再次點擊時，您將看不到toggle的效果，直到它將小於div的高度。換句話說，點擊後，一段時間內不會發生任何事情。

實施例：

document.querySelector('a').addEventListener('click', function(){ 
 
    document.querySelector('.smalldesc').classList.toggle('expand'); 
 
});

.smalldesc { 
 
    max-height:52px; 
 
    overflow:hidden; 
 
    transition:all 1s ease; 
 
} 
 

 
.smalldesc.expand { 
 
    max-height:10000px; 
 
}

<div class="service-1 click1"> 
 
<div class="row"> 
 
<div class="medium-12 small-12 columns smalldesc"> 
 

 
<p class="font16 ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
</div> 
 
<a href="#">Read More</a> 
 
</div> 
 
</div>

所以，max-height值設置爲最高的元件可以是，沒有更多。如果差距不是太高，你不會感覺到問題。

Answer 3

你在找什麼可能是「寬鬆」的說法jQueryUI的ToggleClass API中定義：

http://api.jqueryui.com/toggleClass/

還有，你可以指定使用撥動類的持續時間。這應該是你正在尋找的。

編輯：此方法需要JQuery用戶界面被加載中...

我更新了小提琴加入JQuery用戶界面和一個小額外參數toggleClass：https://jsfiddle.net/pnjpj3uo/13/

$('.click1').find('a[href="#"]').on('click', function (e) { 
e.preventDefault(); 
this.expand = !this.expand; 
$(this).text(this.expand?"Hide Content":"Read More"); 
$(this).closest('.click1').find('.smalldesc, .bigdesc').toggleClass('smalldesc bigdesc', 1000, 'swing');}); 

Answer 4

我對你有一些解決方案，但你不能設置hieght自動這種情況下，你可以做以下，與這些替代你的jQuery代碼： -

$('.click1').find('a[href="#"]').on('click', function (e) { 
    e.preventDefault(); 
    this.expand = !this.expand; 
    $(this).text(this.expand?"Hide Content":"Read More"); 

    $(this).closest('.click1').find('.smalldesc, .bigdesc').animate({ 
     "height": "400px" 
    }, "slow"); 
}); 

它可以幫助你。

Answer 5

CSS規範未定義將元素的高度或寬度從絕對值設置爲auto的方法。這是因爲瀏覽器在做擴展動畫時不能輕易/便宜地以數學方式計算auto的實際值。

大多數擴展或締約動畫涉及auto依靠Javascript。他們所做的是將高度或寬度設置爲auto，然後獲取新的元素高度並使用獲取的值應用動畫。

我已更新您的jsfiddle以顯示我告訴你的內容。 http://jsfiddle.net/pnjpj3uo/14/