Как анимировать контент со сменой класса? - PullRequest
Новая
       22

Как анимировать контент со сменой класса?

0 голосов
/ 07 марта 2019

Предпосылки проблемы:

Предположим, у нас есть два класса, которые мы хотим переключить, в зависимости от некоторого свойства контроллера (абсолютная базовая задача ng-класса):

HTML: 

<div>
    <i class="fa fa-3x"
       ng-class="{'fa-circle': shouldBeCircle, 'fa-square': !shouldBeCircle}"
       ng-click="onClick()"></i>
</div>

JS: 

$scope.shouldBeCircle = false;

$scope.onClick = function ()
{
    $scope.shouldBeCircle = !$scope.shouldBeCircle;
}

Проблема в том, что нам нужно анимировать это изменение (с анимацией изменения содержимого, если это возможно,или базовый переход затухания, если нет).

Подход:

Я пытался оживить его с помощью модуля ng-animate , основанного на этого ответа но без везения.Значки FontAwesome используют селектор fa-icon-name:before с кодом значка ASCII в качестве указанного содержимого.Вот один из моих неудачных подходов: 

.fa-circle-remove:before
.fa-square-add:before 
{
    /* Fired before removing circle class and before adding square class, content : fa-circle icon */
    content: '/f111';
    transition: content 1s ease;
}

.fa-circle-remove-active:before
.fa-square-add-active:before
{
    /* Fired after removing circle class and after adding square class, content : fa-square icon */
    content: '/f0c8';
}

Подобное решение на основе непрозрачности тоже не работает (понижая непрозрачность круга до 0, увеличивая непрозрачность квадрата до 1).Для пояснения, селектор :before необходим для установки содержимого для данного класса fa .Единственный обходной путь, который мне приходит в голову, - это создать 3 различных элемента с простым изменением непрозрачности на подклассах «добавить» и «удалить».

Есть ли прямой и чистый подход для достижения такого эффекта?

...