Question

我正在尝试使用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;
      }
    }
}

Answer 1

而不是重复＆＃34;关于卡＆＃34;作为班级名称的一部分，我会选择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/

动画在视图中不起作用 - 更多功能？

1 个答案: