angularjs - CSS Transition not showing with directive -

angularjs - CSS Transition not showing with directive -

i'm playing transitions , directives. i've created card directive should show clone of self in fullscreen when clicked. transition doesn't happen if don't apply altering css class in timeout. how should done?

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

between original position , fullscreen mode should transition spin. goto class can add/remove transitions card doesn't transition widht/height when window resized. think reads nice =)

.card { width:10vh; height:14vh; background-color:pink; margin: 10px; } .card.goto.fullscreen { transition: 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 simplified version of directive.

var app = angular.module('trans', []); app.directive('card', ['$document', '$timeout', function ($document, $timeout) { homecoming { 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; homecoming spec; } } }]);

i've created jsfiddle demonstrates problem.

the problem doesn't have angular itself, creating new dom node , setting class on right after. such problem described e.g. here, , uses same solution yours in first example.

disclaimer: real angular way of doing nganimate. follows solution same op's, , 1 you'd want utilize if don't want depend on module – it's ~11kb uncompressed, , 4kb gzipped. take wisely!

what worked me waiting dom node ready:

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

this amounts same thing using 0ms timeout, a. more descriptive , b. works in cases, while timeout solution apparently fails in firefox (see linked article).

the sec solution given in article reads little more hackish (matter of opinion, really), , you'll have retrieve actual dom element instead of jqlite wrapper around utilize it.

why happens, though adding class "after appending", wasn't able find out. perhaps appendchild, append uses internall, asynchronous (i.e. pushes dom manipulation task onto event queue)? more googling might useful if you're interested in cause of problem.

angularjs angularjs-directive css-transitions