動畫無法正常工作 - 更多功能？

我想使用CSS只有一個視圖 - 更多的功能，但我只有單向動畫。我無法理解這是什麼錯誤。我正在嘗試這種方式。請幫忙。動畫無法正常工作 - 更多功能？

<div class="about-card"> 
    <h3>About The Golden Crest</h3> 
    <p class="about-card-content show-less">Nestled in the serene surroundings and in the heart of Gangtok, Sikkim, The Golden Crest is perfect for you to spend your vacation. Giving you an ideal space to take a break from the busy schedules of life 
    Nestled in the serene surroundings and in the heart of Gangtok, Sikkim, The Golden Crest is perfect for you to spend your vacation. Giving you an ideal space to take a break from the busy schedules of life 
    </p> 
    <a href="#" class=""> + more</a> 
</div>

SCSS是：

.about-card { 
    width:500px; 
    &-content{ 
     margin-bottom: 6px; 
     transition: all .45s cubic-bezier(.44,.99,.48,1); 
     max-height: 300px; 
     &.show-less{ 
     display: -webkit-box; 
     -webkit-line-clamp: 2; 
     -webkit-box-orient: vertical; 
     margin-bottom: 6px; 
     overflow: hidden; 
     max-height: 38px; 
     } 
    } 
}

來源

2016-10-03 vish

而不是重複類名的「關於卡」的一部分，我會去一個content類：

<p class="content show-less">

然後引用它與：

.about-card { 
width:500px; 
& .content{ 
    margin-bottom: 6px; 
    transition: all .45s cubic-bezier(.44,.99,.48,1); 
    ...

在這裏看到的jsfiddle我做：https://jsfiddle.net/8befj9t3/

來源

2016-10-03 07:19:55

靜止動畫僅是當我刪除節目少類。我需要動畫這兩種情況下，當我加入演出，更多的階層和刪除節目，更多的類。 – vish

好吧，我的不好，唯一能讓雙方動畫的方法是去掉'display：webkit-box'，''show'less''，然後玩添加和刪除這個類。但是，然後，你在文本的末尾丟失了...... ......也許你可以嘗試另一種方法來添加這些內容？ –

動畫無法正常工作 - 更多功能？

回答

相關問題