Блог

Главная - Вопросы по программированию - Анимация не работает в режиме просмотра — больше функциональности?

Анимация не работает в режиме просмотра — больше функциональности?

#html #css

#HTML #css

Вопрос:

Я пытаюсь создать представление -больше функциональности, используя только 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;
    amp;-content{
      margin-bottom: 6px;
      transition: all .45s cubic-bezier(.44,.99,.48,1);
      max-height: 300px;
      amp;.show-less{
         display: -webkit-box; 
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 6px;
        overflow: hidden;
        max-height: 38px;
      }
    }
}

Ответ №1:

Вместо того, чтобы повторять часть имени класса «about-card», я бы выбрал content класс :

 <p class="content show-less">

а затем ссылаться на него с :

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

Смотрите здесь JSFiddle, который я сделал: https://jsfiddle.net/8befj9t3 /

Комментарии:

1. Тем не менее анимация появляется только тогда, когда я удаляю класс без показа.. Мне нужна анимация в обеих ситуациях, когда я добавляю класс show-more и удаляю класс show-more.

2. Хорошо, мой плохой, единственный способ получить анимацию с обеих сторон — это удалить display: webkit-box; on show-less и поиграть с добавлением и удалением этого класса. Но тогда вы теряете ... в конце своего текста … может быть, вы можете попробовать другой способ добавить их?