Question

我正在尝试在单击按钮时切换淡入动画，然后会显示先前隐藏的元素，但没有动画。

当我尝试在Chrome开发者控制台内部启用/关闭不透明度时，动画可以正常工作，但不是在按钮触发事件时。

我尝试复制ngShow documentation page上提供的代码示例，将其添加到我的CSS中：

.loader.ng-hide-add, .animate-show.ng-hide-remove {
  transition: all linear 0.5s;
}

.loader.ng-hide {
  line-height: 0;
  opacity: 0;
  padding: 0 10px;
}

当然，没有运气。我还尝试添加可见性：可见性和不透明度：1和其他方式的不透明度：0，如下面的代码示例所示。

我剥离了代码示例，只包含我认为相关的部分。如果这还不够，请告诉我，我很乐意提供更多。

提前致谢。

SCSS：

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: $dotSize;
    height: $height;

    transition: all linear 1s;
    opacity: 0;

    &.visible {
        transition: all linear 1s;
        opacity: 1;
    }

}

HTML：

<div class="loader" ng-class="{'visible': loading}" ng-show="loading">
    Content to be animated
</div>
<button class="button" id="snap" ng-click="snap()">
    Click me
</button>

JS：

(function() {
    'use strict';

    var app = angular.module('controllers', []);

    app.controller('IndexController', ['$scope', function ($scope) {
        $scope.snap = function() {
            $scope.loading = true;
        };
    }]);
})();

角度不起作用的CSS动画

0 个答案: