Fixed. I made it work be doing a small refactoring. Basically instead to
toggling 4 CSS classes ('full screen' into 'on top') I'm using one CSS
class ('fullscreen'). I don't understand what was the problem before and
how my change fixed the issue. And I would like to understand.
New html code is:
<div class="search input container" x-ng-class="{'fullscreen':
initial}">
And LESS:
&.input.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 10rem;
-webkit-transition: height 0.5s;
&.fullscreen {
height: 100vh;
}
}
On Tuesday, 18 March 2014 14:58:55 UTC, Tomasz Jureczko wrote:
>
> I have an AngularJS 1.2.9 app. My task is to introduce a CSS transition on
> this element:
>
> <div class="search input container" x-ng-class="{'full screen':
> initial, 'on top': !initial}">
>
> when a class changes from 'full screen' to 'on top'. CSS transition works
> well in Chrome Canary when I try it outside of the Angular app (code on
> JSFiddle <http://jsfiddle.net/bXBXN/2/>) but doesn't work in our app. Any
> ideas why the transition doesn't work when AngularJS is adding/removing
> classes? When I toggle the classes manually from a web inspector, it works.
> Any help much appreciated. Thank you.
>
> P.S. Works only in Chrome Canary ATM, but that is ok for me.
>
>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
