Плавное сворачивание и разворачивание текста?

Question

[IIIu6ko]

https://jsfiddle.net/LL54vf73/2/

$(document).ready(function() {

  $('.reviews__text').each(function() {
    if ($(this).text().length > 391) {
      $(this).data('full', $(this).text());
      $(this).text($(this).text().slice(0, 391) + '...');
      $(this).after("<span class='reviews__more'>Развернуть</span>");
    }
  });

  $('.reviews__more').click(function() {
    if ($(this).text() == 'Развернуть') {
      $(this).siblings('.reviews__text').text($(this).siblings('.reviews__text').data('full'));
      $(this).text('Свернуть');
    } else {
      $(this).siblings('.reviews__text').text($(this).siblings('.reviews__text').text().slice(0, 391) + '...');
      $(this).text('Развернуть');
    }
  });

});

Подскажите как можно анимировать подобную конструкцию? Или как и что нужно переписать, чтобы можно было анимировать.

Нужно чтобы плавно разворачивалось и сворачивалось. Высота абзаца .reviews__text изменяется за счёт смены длинны текста, но я не знаю как туда подлезть и анимировать эту высоту. Transition стоит, но эффекта ноль, видимо какие-то нюансы.

мб записывать высоту элемента в data() вместе с текстом и как-то потом её манипулировать или вообще переписать скрипт.

Comments

[Сергей Собко]

Вам важно вырезать часть текста или просто спрятать полный текст? Если второе - почему сразу не играться с высотой блока?
1. Устанавливаем max-height блока
2. Используем animate, либо через CSS пишем транзишн на изменение высоты блока
3. При клике по Свернуть/Развернуть узнаем текущую высоту данного блока и в зависимости от неё сворачиваем/разворачиваем его, изменяя текст кнопки

[IIIu6ko]

Catzo0: Я изначально и отталкивался от высоты, но потом решил делать через вырезание т.к. при простом изменении высоты нельзя выставить многоточие в конце текста. Есть идеи как можно скомбинировать?

Спасибо. Переделал пока так

$('.reviews__text').each(function() {
		if ($(this).height() > 288) {
			$(this).data('height', $(this).height());
			$(this).css('maxHeight', '288px');
			$(this).after("<span class='reviews__more'>Развернуть</span>");
		}
	});

	$('.reviews__more').click(function() {
		if( $(this).text() == 'Развернуть' ) {
			$(this).siblings('.reviews__text').animate({maxHeight: $(this).siblings('.reviews__text').data('height') }, 400);
			$(this).text('Свернуть');
		} else {
			$(this).siblings('.reviews__text').animate({maxHeight: '288px'}, 400);
			$(this).text('Развернуть');
		}
	});

Но хочется всё же многоточие в конце. Попробую ещё скомбинировать эти два способа, мб чё выйдет.

[Сергей Собко]

Александр Шибков: быстрого способа на коленке я сейчас не придумаю, но есть такая крутая вещь в css как text-overflow: ellispis, свойство как раз прячет вылезающий за границы блока текст, добавляя в конце многоточие в конце. Правда работает только для текста в одну строку :)
Но погуглив Multiline ellipsis в выдаче куча вариантов как с помощью css можно сделать то, что вы хотите.
Вот один из примеров.
Копните в эту сторону - может почерпнёте что для себя.

[IIIu6ko]

Catzo0: Спасибо, завтра гляну.

Пока вот такую бессовщину накидал :D

$('.reviews__text').each(function() {
		if ($(this).height() > 288) {
			$(this).data('height', $(this).height());
			$(this).css('height', '288px');
			$(this).after("<span class='reviews__more'>Развернуть</span>");
		}

		if ($(this).text().length > 424) {
			$(this).data('full', $(this).text());
			$(this).text( $(this).text().slice(0, 424) + '...' );
		}
	});

	$('.reviews__more').click(function() {
		if( $(this).text() == 'Развернуть' ) {
			$(this).siblings('.reviews__text').animate({height: $(this).siblings('.reviews__text').data('height') }, 424);
			$(this).siblings('.reviews__text').text( $(this).siblings('.reviews__text').data('full') );
			$(this).text('Свернуть');
		} else {
			$(this).siblings('.reviews__text').animate({height: '288px'}, 200);
			$(this).siblings('.reviews__text').text( $(this).siblings('.reviews__text').text().slice(0, 424) + '...' );
			$(this).text('Развернуть');
		}
	});

Очень криво, так что вернусь пока на предыдущий вариант с max-height. Завтра гляну Multiline ellipsis может что выйдет, надеюсь не дерьмо) Хотя лучше дерьмо, чем ничего или лучше ничего, чем дерьмо?) Пора спать крч)

[Сергей Собко]

В общем Я_сделаль.jpg .

https://jsfiddle.net/2kwda4q9/

[EVAS]

Можно еще так

$(document).ready(function() {

  $('.reviews__text').each(function() {
    if ($(this).text().length > 391) {
      $(this).data('full', $(this).text() );
      $(this).html($(this).text().slice(0, 391) + '... <span class="volt">'+$(this).text().slice(391, 99999)+'</span>' );
      $(".volt").hide()
      $(this).after("<span class='reviews__more'>Развернуть</span>");
    }
  });

  $('.reviews__more').click(function() {
    if ($(this).text() == 'Развернуть') {
       $(".volt").show(function(){
       		$(this).addClass('animated slideInDown')
       })
      $(this).text('Свернуть');
    } else {
       $(".volt").hide(function(){
       	$(this).addClass('animated slideInDown')
       })
      $(this).text('Развернуть');
    }
  });

});

добавь только

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">

[IIIu6ko]

EVAS: Не совсем понял зачем animate :) + многоточие не удаляется при разворачивании и анимация тупит(и с animate и так, как я переделал).

$('.reviews__text').each(function() {
		if ($(this).text().length > 391) {
			$(this).data('full', $(this).text() );
			$(this).html($(this).text().slice(0, 391) + '... <span class="volt">'+$(this).text().slice(391, 99999)+'</span>' );
			$(".volt").hide()
			$(this).after("<span class='reviews__more'>Развернуть</span>");
		}
	});

	$('.reviews__more').click(function() {
		if ($(this).text() == 'Развернуть') {
			$(this).siblings('.reviews__text').find('.volt').slideDown();
			$(this).text('Свернуть');
		} else {
			$(this).siblings('.reviews__text').find('.volt').slideUp();
			$(this).text('Развернуть');
		}
	});

Спасибо за вариант, возможно что-то подцеплю :)

+ разворачивались все айтемы при клике на любой из, я пофиксил.

[IIIu6ko]

Catzo0: Я вот почти довёл до ума твой вариант, но при сворачивании не могу сообразить как выставить задержку)
Чтобы сначала высота изменялась, а потом он уже slice делал и текст more менял. Если поставить setTimeout, то он не может из data() достать текст и выбивает ошибку на slice т.к. нечего вырезать. Может я туплю просто?

https://jsfiddle.net/2kwda4q9/2/

$('.reviews__text').each(function() {
		if ($(this).text().length > 391) {
			$(this).parent('.reviews__wrapper').data('height', $(this).parent('.reviews__wrapper').height());
			$(this).data('full', $(this).text());
			$(this).text($(this).text().slice(0, 391) + '...');
			$(this).parent('.reviews__wrapper').css('height', '303px');
			$(this).after("<span class='reviews__more'>Развернуть</span>");
		}
	});

	$('.reviews__more').click(function() {
		var trigger = $(this); // Кнопка свернуть/развернуть
		var feedback_text = trigger.siblings('.reviews__text').data('full'); //Текст отзыва
		var feedback_container = trigger.siblings('.reviews__text'); //Контейнер текста
		var feedback_container_wrapper = trigger.parent('.reviews__wrapper'); //Обёртка для контейнера

		if (trigger.text() == 'Развернуть') {
			feedback_container_wrapper.animate({height: feedback_container_wrapper.data('height') + 23 }, 400);
			feedback_container.text(feedback_text);
			trigger.text('Свернуть');

		} else {
			feedback_container_wrapper.animate({height: '303px'}, 400);
			feedback_container.text( feedback_text.slice(0, 391) + '...' );
			trigger.text('Развернуть');
		}
	});

"+ 23" - Эт я прибавляю высоту .reviews__more

[Сергей Собко]

Александр Шибков: функцию animate можно записать следующим способом

$.animate({
"height": "100px" //изменяемое свойство
 },
 500,  //длительность анимации
 function(){
  //место для тела анонимной функции, которая выполнится, после завершения анимации
});

[IIIu6ko]

Catzo0: о, найс, то, что надо. Теперь почти идеально :) Slice немного грязновато работает, но в целов всё найс.
https://jsfiddle.net/2kwda4q9/4/

Спасибо за помощь.
Если хочешь пиши ответ, я отмечу как решение :)

[Сергей Собко]

Александр Шибков: Странно, открываю фиддл - скрипт не отрабатывает. Нет триггера и многоточие не добавляется.
P.s. за решение - не стоит. я это делаю для самообучения, не для репутации :)

[IIIu6ko]

Catzo0: Из-за разрешения.. Текст сжимается и высота блока становится больше, а там оверфлов хидден задан и жёстко высота выставлена в скрипте.
https://jsfiddle.net/2kwda4q9/6/