Как я могу сделать эту анимацию более плавной?

#javascript #jquery #angularjs #css #transform

#javascript #jquery #angularjs #css #преобразование

Вопрос:

У меня есть небольшой plnkr, который я использую для работы с AngularJS и ngAnimate. Сейчас я изучаю css3 transitions и transform. Анимация свертывания / развертывания выглядит круто, но элемент занимает все пространство, которое он в конечном итоге займет до завершения анимации. При сворачивании это еще хуже, потому что текст сжимается и исчезает, но затем контейнер закрывается вместо элегантного закрытия.

http://plnkr.co/edit/hzJlOstUCeH2sB47OstS?p=preview

Я пытался имитировать анимацию скольжения jQuery, но, если я не знаю высоту, на которую я анимирую, я, похоже, не могу сделать эту анимацию плавной. Кто-нибудь знает, как функция slideDown в jQuery может плавно анимировать элементы переменной высоты?

1. вы обновили плунжер — он отличается от версии .gif.

2. @arturgrzesiak Да, я сделал. Как только у меня появилось решение, я продолжил обновлять свою демонстрацию. Теперь демонстрация работает так, как должна. Спасибо, что прочитали мой вопрос, хотя 🙂

Ответ №1:

Я могу сделать анимацию сворачивания / развертывания плавной, изменив line-height . Это позволяет мне анимировать строки, не зная общей высоты. Вот демонстрация. Возможно, это не то, что вы хотите, чтобы она выглядела, но она более плавная, чем раньше. Я подозреваю, что jQuery slideDown что-то делает с вычисленной высотой, но я не уверен.

1. Это немного отрывисто, но я думаю, что это лучше, чем раньше. Спасибо 🙂

2. Я не уверен, почему у браузера возникают проблемы с производительностью при анимации этого. Я запустил хронометраж Chrome, и время от времени он падает ниже 30 кадров в секунду, и это не из-за перерисовки. IE, с другой стороны, выполняет ее плавно. Вероятно, есть лучший способ, но, вероятно, более сложный.

3. Кроме того, вы должны использовать -webkit-transform , поскольку scale() доступен только в -web-kit-transform для Chrome

4. Это странно. Я использую Chrome, и масштабирование без префикса поставщика, похоже, работает o_O

5. Хороший эффект в Firefox и IE 🙂