CSS 过渡未与指令一起显示

Question

我在玩转场和指令。我创建了一个 Card 指令，单击该指令时应在全屏中显示它的克隆。如果我在超时时不应用更改的 css 类，则不会发生转换。应该这样吗？

<div ng-app='trans'>
    <div data-card class='card'>timeout</div>
    <div data-card='notimeout' class='card'>not timeout</div>
</div>

在原始位置和全屏模式之间，它应该旋转过渡。 goto 类只是为了让我可以添加/删除转换，以便在调整窗口大小时卡片不会转换宽度/高度。我也觉得很好看=)

.card {
    width:10vh;
    height:14vh;
    background-color:pink;
    margin: 10px;
}
.card.goto.fullscreen {
    transition: all 0.6s linear;
}
.card.fullscreen {
    height:95vh;
    width: 68vh;
    position:absolut;
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    margin: 0;
    transform: translate(-50%, -50%) rotateY(360deg);
}

这是我的指令的简化版本。

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

app.directive('card', ['$document', '$timeout', function ($document, $timeout) {
    return {
        restrict: 'A',
        link: link,
        scope: {}
    };

    function link(scope, element, attrs) {

        var clone;
        element.on('click', function () {

            if (clone) {
                clone.off().remove();
            }

            clone = element.clone();
            var spec = getCardSpecifications();

            clone.css({
                'margin': '0',
                    'top': spec.top + 'px',
                    'left': spec.left + 'px',
                    'position': 'absolute'
            });
            $document.find('body').append(clone);

            clone.addClass('goto');

            if (attrs.card == 'notimeout') {

                clone.addClass('fullscreen');
            } else {

                $timeout(function () {
                    clone.addClass('fullscreen');
                }, 0);
            }

        });

        function getCardSpecifications() {
            var spec = {};
            spec.top = element.prop('offsetTop');
            spec.left = element.prop('offsetLeft');
            spec.height = element[0].offsetHeight;
            spec.width = element[0].offsetWidth;
            return spec;
        }

    }
}]);

我创建了这个 jsfiddle 来演示问题。

Answer 1

问题与 Angular 本身无关，而是与创建一个新的 DOM 节点并在其上设置一个类有关。这样的问题被描述为例如here，它使用的解决方案与您在第一个示例中的解决方案相同。

免责声明：真正的 Angular 方法是 ngAnimate。接下来是一个与 OP 几乎相同的解决方案，如果您不想依赖该模块，您只想使用该解决方案 - 但它只有 ~11kb 未压缩和 4kb gzipped。明智地选择！

对我有用的是等待 DOM 节点准备好：

clone.ready(function() {
    clone.addClass('fullscreen');
});

这与使用 0 毫秒超时几乎相同，但 a. 更具描述性，b. 适用于所有情况，而超时解决方案显然有时在 Firefox 中失败（请参阅 linked article）。

文章中给出的第二个解决方案读起来也有点骇人听闻（实际上是意见问题），您必须检索实际的 DOM 元素而不是围绕它的 jqLit​​e 包装器才能使用它。

---

为什么会发生这种情况，即使您在“附加后”添加类，我也无法快速找出。或许appendChild（其中append 最有可能在内部使用）是异步的（即将DOM 操作任务推入事件队列）？如果您真的对导致此问题的原因感兴趣，则进行更多谷歌搜索可能会很有用。

Answer 2

你可能应该使用 animate 来制作动画

 $animate.addClass(clone, 'fullscreen'

我在尝试获取 animate 的依赖项时遇到了问题，所以

我发了Plunker

Answer 3

当使用诸如 css 之类的方法通过指令更改 DOM 时，您必须通知摘要循环这些更改。

为了实现这一点，您应该在 if 语句中添加 css 类之后添加 scope.$apply()。 $timeout 为您工作的原因是因为它在超时执行后调用 $apply 。