动画无法正常工作 - 更多功能？

我想使用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''，然后玩添加和删除这个类。但是，然后，你在文本的末尾丢失了...... ......也许你可以尝试另一种方法来添加这些内容？ –

动画无法正常工作 - 更多功能？

回答

相关问题