CSS转换不显示指令 [英] CSS Transition not showing with directive
问题描述
我在玩的过渡和指令。我创建了一个卡指令，点击时应该表现出来的自我克隆全屏。如果我不超时应用改变CSS类的转换不会发生。是，那应该怎么办呢？
I'm playing with transitions and directives. I've created a Card directive that should show a clone of it self in fullscreen when clicked. The transition doesn't happen if I don't apply the altering css class in a timeout. Is that how it should be done?
<div ng-app='trans'>
<div data-card class='card'>timeout</div>
<div data-card='notimeout' class='card'>not timeout</div>
</div>
原来的位置和全屏模式，应以自旋之间的过渡。 goto的类只是，这样我可以添加/删除转换，这样，当窗口大小卡没有过渡widht /高度。我认为它读取环境也不错=）
Between to original position and the fullscreen mode it should transition with a spin. The goto class is just so that i can add/remove transitions so that the card doesn't transition widht/height when the window is resized. I think it reads nice too =)
.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);
}
这是我的指令的简化版本。
This is a simplified version of my directive.
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 演示该问题。
推荐答案
这个问题没有什么关系角度本身，而是创造一个新的DOM节点，之后在其上设置一个类。这样的问题是例如描述<一href=\"https://timtaubert.de/blog/2012/09/css-transitions-for-dynamically-created-dom-elements/?utm_source=tuicool\"相对=nofollow>此处，它使用在第一个例子中相同的溶液你们的。
The problem doesn't have anything to do with Angular itself, but with creating a new DOM node and setting a class on it right after. Such a problem is described e.g. here, and it uses the same solution as yours in the first example.
免责声明：这样做的真正角的方法是的 ngAnimate 。下面是一个解决方案，几乎是一样的OP的，和一个你只需要使用，如果你不想依赖该模块上 - 但它只是〜11KB uncom pressed和4KB gzip压缩。明智的选择！
DISCLAIMER: The real Angular way of doing this would be ngAnimate. What follows is a solution that is almost the same as the OP's, and one you'd only want to use if you don't want to depend on that module – but it's only ~11kb uncompressed, and 4kb gzipped. Choose wisely!
也什么工作对我来说是等待DOM节点做好准备：
What also worked for me is waiting for the DOM node to be ready:
clone.ready(function() {
clone.addClass('fullscreen');
});
这相当于几乎同样的事情用一个0毫秒超时，目前的一个的更多描述和湾的作品在所有的情况下，而超时的解决方案显然有时无法在Firefox（见<一href=\"https://timtaubert.de/blog/2012/09/css-transitions-for-dynamically-created-dom-elements/?utm_source=tuicool\"相对=nofollow>链接文章）。
This amounts to almost the same thing as using a 0ms timeout, but is a. more descriptive and b. works in all cases, while the timeout solution apparently sometimes fails in Firefox (see linked article).
在文章中给出的第二个解决方案还读多一点的hackish（见仁见智，真的），你就会有检索实际的DOM元素，而不是jqLite包装的周围使用它。
The second solution given in the article also reads a little more hackish (matter of opinion, really), and you'll have to retrieve the actual DOM element instead of the jqLite wrapper around it to use it.
到底为什么发生这种情况，即使你是后追加添加类，我是不是能够很快找到答案。也许的appendChild ，其中追加最有可能使用internall，是异步的（即DOM操作任务推到事件队列） ？如果你在这个问题的原因很感兴趣一些谷歌搜索可能是有用的。
Why exactly this happens, even though you are adding the class "after appending", I wasn't able to quickly find out. Perhaps appendChild, which append most likely uses internall, is asynchronous (i.e. pushes the DOM manipulation task onto the event queue)? Some more googling might be useful if you're really interested in the cause of this problem.
这篇关于CSS转换不显示指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
