I have problem since the latest Chrome browser was released.
I'm using angular 1.2.0 app with ng-animate included.
In my index file I have container element like
<div id="container" ng-class="{container:$root.container}" ng-view ng-cloak ></div>
Since the latest Chrome release I have the issue, when the transitions are finished the app view ends with 2 container with vertical/horizontal scroll. They become three, four and so on in the DOM after each transition.
The inline css snapshot in Chrome, when I have only two DOM containers is:
class="ng-scope container ng-animate ng-leave ng-animate-start ng-animate-active ng-leave-active"
for the first one and
class="ng-scope container ng-animate ng-enter ng-animate-start ng-animate-active ng-enter-active"
for the second.
The problem is the this is only on Chrome 49. On other browsers it is acting as expected. On firefox for example (same applies for safari) looking at the DOM on the on each transition I can see that the ng-animate creates second element and then removes it. It ends only with
class="ng-scope container"
Anyone with same problem ? I can't see any decent solution for now. I don;t want to add watchers in some parent controller or any similar ugly patch.
Thanks in advance guys!
Related
I got the very strange bug with angular-ui bootstrap tooltips. When its attribute tooltip-append-to-body set to true on some pages (not all of them) it doesn't work. Every time I hover the target element angular-ui appends the element to DOM (look at the screenshot), and don't delete it on "unhover".
I will be very appreciated for any thoughts about possible reasons.
I found the reason of such a strange behavior:
on those pages when the bug happens I have the 3rd-party SVG component, which is using foreignObject. This foreignObject hosts html with the body tag in it...
I spent the last 5 hours trying to get this animation to work with no luck. I wanted to create a cool animation whenver the user click on a button, the idea is to display a list of ul elements in a flip animation, pretty much like what http://lab.hakim.se/scroll-effects/mobile.html is doing (if you selected flip from the gear icon and changed chrome device mode to a mobile device).
Im using ngAnimate along with Angular and Ionic, I created the snippet here http://play.ionic.io/app/4ae65754fc64 (try to click the Add to Cart button). I want to display each li item as if they are flip and cascading whenever they are displayed. For some reason all the animation classed are ignored.
Ok, I think I achieved what you were wanting to achieve. I provided you two demos below.
But first of all the ng-animate directive is not supported anymore in AngularJS >= 1.2. And for ng-show based animations you have to use the ng-hide-add, ng-hide-remove CSS classes not the CSS classes described in the ngRepeat documentation.
The ionic demo (first link below) is basicly just a mockup of your code and is not perfect by any means.
The codepen demo is a bit more modified example and generic example. I used <ion-list> and <ion-item> instead of <ul> and <li>.
Hopefully this gets you in the right direction when implementing your final solution.
Ionic demo: http://play.ionic.io/app/3c0e90238fe8
Codepen demo (more generic): http://codepen.io/thepio/pen/KMPeZo
I have a Web-App written in Typescript with Angular.
This displays a huge SVG element with d3js and renders many smaller SVGs on it, at least 100. It also has a header, that is a .png image. This image is not rendered in IE11, in fact, after inspecting the DOM IE removes the whole element from it.
This is my code for rendering the .png.
<img ng-controller="Ctrl as ctrl" src="images/logo.png" class="logo"
tooltip="{{'version' | translate:ctrl.version}}" tooltip-placement="bottom"/>
If you refresh the page, it shows for a second, then get's removed.
This only happens in IE, not in Firefox or Chrome.
I have a glitch with angular's ng-repeat directive. My HTML is as follow:
<ul ng-show="predictions" id="search-place-predictions">
<li ng-repeat="prediction in predictions">{{prediction.description}}</li>
</ul>
and $scope.predictions is an Array in my controller, that takes between 0 and 5 items. However, at each update of this array, I have a visual glitch of around .2 second where the PREVIOUS <li> are still displayed, and the <li> from the new version of the array are also displayed on top of it. No amounts of $apply() have been able to solve this.
EDIT: I have a transition: border-top .2s ease-out; style applied to my list items. When commented out, the glitch disappears.
It's not a bug, per se. Some browsers don't support animation, but angular will still delay hiding and showing by the animation length it detects in your CSS. Usually affects IE <= 9.
See this answer for ways to disable animations in angular.
My question is similar to this one and this one, but involves the new animations in AngularJS 1.2.0.
Basically, I have a bunch of elements on my signup page that are initially hidden and only displayed when a particular form element is invalid (they point to the invalid form element and display a message like "password needs to be at least 8 characters"). These messages fade in and out as they are shown/hidden.
But as soon as the signup page is displayed the elements are visible and fade out. They are briefly visible (they "blink" or "flash" on the screen, as is the case in situations where ng-cloak is necessary).
Here's a plunker to demonstrate the behaviour that I'm experiencing. In this plunker I have set up a basic route (the "login" page) that contains a box and a button that toggles the box's visibility. Notice how the box fades out when you click run? It should just be hidden. (I've deliberately set the animation to be slow so you can see the animation occurring).
How can I stop the animation from occurring initially?
What I've tried:
Set ng-cloak on the animating elements.
Use ng-cloak with the display: none !important rule added. (See this)
Setting display: none on the element, as if it were an "initial setting" for the element. (See this)
Interestingly, this plunker behaves properly and the animation doesn't occur initially. This plunker doesn't use routing and the controller is set explicitly on the body tag. I want to use routing though.
There's a problem with the version of angular you are using. Angular animate changed a lot I think in 1.2 so try this:
<script src="http://code.angularjs.org/1.2.14/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-animate.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-route.min.js"></script>
Check it out, I've forked your plunker here
http://plnkr.co/edit/Mchjx51GREGU2Gj0NBXX?p=preview