Question

问题的背景：

假设我们有两个要切换的类，具体取决于某些控制器属性（绝对的基本ng-class任务）：

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;
}

问题是，我们需要为该更改设置动画（如果可能，使用内容更改动画，否则，请使用基本淡入淡出过渡。）

方法：

我尝试使用基于this answer的 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个不同的元素。

任何直接而干净的方法都能达到这种效果吗？

如何通过班级变化为内容设置动画？

问题的背景：

方法：

0 个答案: