BREAKING CHANGE: if your CSS code made use of the `ng-animate-anchor`
CSS class for referencing the anchored animation element then your
code must now use `ng-anchor` instead.
All of ngAnimate has been rewritten to make the internals of the
animation code more flexible, reuseable and performant.
BREAKING CHANGE: JavaSript and CSS animations can no longer be run in
parallel. With earlier versions of ngAnimate, both CSS and JS animations
would be run together when multiple animations were detected. This
feature has now been removed, however, the same effect, with even more
possibilities, can be achieved by injecting `$animateCss` into a
JavaScript-defined animation and creating custom CSS-based animations
from there. Read the ngAnimate docs for more info.
BREAKING CHANGE: The function params for `$animate.enabled()` when an
element is used are now flipped. This fix allows the function to act as
a getter when a single element param is provided.
```js
// < 1.4
$animate.enabled(false, element);
// 1.4+
$animate.enabled(element, false);
```
BREAKING CHANGE: In addition to disabling the children of the element,
`$animate.enabled(element, false)` will now also disable animations on
the element itself.
BREAKING CHANGE: Animation-related callbacks are now fired on
`$animate.on` instead of directly being on the element.
```js
// < 1.4
element.on('$animate:before', function(e, data) {
if (data.event === 'enter') { ... }
});
element.off('$animate:before', fn);
// 1.4+
$animate.on(element, 'enter', function(data) {
//...
});
$animate.off(element, 'enter', fn);
```
BREAKING CHANGE: There is no need to call `$scope.$apply` or
`$scope.$digest` inside of a animation promise callback anymore
since the promise is resolved within a digest automatically (but a
digest is not run unless the promise is chained).
```js
// < 1.4
$animate.enter(element).then(function() {
$scope.$apply(function() {
$scope.explode = true;
});
});
// 1.4+
$animate.enter(element).then(function() {
$scope.explode = true;
});
```
BREAKING CHANGE: When an enter, leave or move animation is triggered then it
will always end any pending or active parent class based animations
(animations triggered via ngClass) in order to ensure that any CSS
styles are resolved in time.
Prior to this fix if an element that contained ng-show or ng-hide was in its hidden state
then any other animation run on the same element would cause the animation to appear despite
the element itself already being hidden. This patch ensures that NO animations are visible
even if the element is set as hidden.
Closes#9103Closes#9493
Since ngShow/ngHide animations add and remove the .ng-hide class, having to remember
to write display:block on your own is a hassle and leads to problematic animation
code. This fix places a default on the animation for you instead.
Closes#3813
$animate attempts places a `transition: none 0s` block on the element when
the first CSS class is applied if a transition animation is underway. This
works fine for structural animations (enter, leave and move), however, for
class-based animations, this poses a big problem. As of this patch, instead
of $animate placing the block, it is now the responsibility of the user to
place `transition: 0s none` into their class-based transition setup CSS class.
This way the animation will avoid all snapping and any will allow $animate to
play nicely with class-based transitions that are defined outside of ngAnimate.
Closes#6674Closes#6739
BREAKING CHANGE: Any class-based animation code that makes use of transitions
and uses the setup CSS classes (such as class-add and class-remove) must now
provide a empty transition value to ensure that its styling is applied right
away. In other words if your animation code is expecting any styling to be
applied that is defined in the setup class then it will not be applied
"instantly" default unless a `transition:0s none` value is present in the styling
for that CSS class. This situation is only the case if a transition is already
present on the base CSS class once the animation kicks off.
BREAKING CHANGE: ngClass and {{ class }} will now call the `setClass`
animation callback instead of addClass / removeClass when both a
addClass/removeClass operation is being executed on the element during the animation.
Please include the setClass animation callback as well as addClass and removeClass within
your JS animations to work with ngClass and {{ class }} directives.
Closes#6019
With ngAnimate, CSS transitions, that are not properlty triggered, are forceably closed off
by appling a fallback property. The fallback property approach works, however, its styling
itself may effect CSS inheritance or cause the element to render improperly. Therefore, its
best to stick to using a scheduled timeout to run sometime after the highest animation time
has passed.
Closes#5255Closes#5241Closes#5405
The clip property seems to remove the box-shadow property when an absolute
positioned animation is ongoing. This fix changes the property to be border-spacing
which is also very underused. The border-spacing CSS property is only visible
when border-collapse is set to separate.
Closes#4902Closes#5030
- ngAnimate directive is gone and was replaced with class based animations/transitions
- support for triggering animations on css class additions and removals
- done callback was added to all animation apis
- $animation and $animator where merged into a single $animate service with api:
- $animate.enter(element, parent, after, done);
- $animate.leave(element, done);
- $animate.move(element, parent, after, done);
- $animate.addClass(element, className, done);
- $animate.removeClass(element, className, done);
BREAKING CHANGE: too many things changed, we'll write up a separate doc with migration instructions
Previously an element like
<div class="foo ng-cloak">...</div>
would still be annoyingly visible if it matched a CSS rule like
.foo { display: inline-block; }, overriding ng-cloak's display: none.
- By default the runner now creates multiple output formats as it runs. Nodes are created in the DOM with ids: json, xml, and html.
ex. $('#json').html() => json output of the runner
ex. $('#xml').html() => json output of the runner
$result is also an object tree result.
The permitted formats are html,json,xml,object.
If you don't want certain formats you can select specific ones with the new ng:scenario-output attribute on the script tag.
<script src="angular-scenario.js" ng:scenario-output="xml,json">
- Added element(...).count() that returns the number of matching elements for the selector.
- repeater(...).count() now returns 0 if no elements matched which can be used to check if a repeater is empty.
- Added toBe() matcher that does strict equality with ===
- Implement iit and ddescribe. If iit() is used instead of it() then only that test will run. If ddescribe() is used instead of describe() them only it() statements inside of it will run. Several iit/ddescribe() blocks can be used to run isolated tests.
- Implement new event based model for SpecRunner. You can now listen for events in the runner. This is useful for writing your own UI or connecting a remote process (ex. WebDriver). Event callbacks execute on the Runner instance.
Events, if fired, will always be in the below order. All events always happen
except for Failure and Error events which only happen in error conditions.
Events:
RunnerBegin
SpecBegin(spec)
StepBegin(spec, step)
StepError(spec, step, error)
StepFailure(spec, step, error)
StepEnd(spec, step)
SpecError(spec, step, error)
SpecEnd(spec)
RunnerEnd
- Only allow the browser to repaint every 10 steps. Cuts 700ms off Firefox in benchmark, 200ms off Chrome.
- Bug Fix: Manually navigate anchors on click since trigger wont work in Firefox.
Polish the Scenario Runner UI to include:
- a scroll pane that steps appear in since the list can be very long
- Collapse successful tests
- Show the line where the DSL statements were when there's an error (Chrome, Firefox)
Also:
- Remove lots angular.bind calls to reduce the amount of stack space used.
- Use setTimeout(...,0) to schedule the next future to let the browser breathe and have it repaint the steps. Also prevents overflowing the stack when an it() creates many futures.
- Run afterEach() handlers even if the it() block fails.
- Make navigateTo() take a function as the second argument so you can compute a URL in the future.
- Add wait() DSL statement to allow interactive debugging of tests.
- Allow custom jQuery selectors with element(...).query(fn) DSL statement.
Known Issues:
- All afterEach() handlers run even if a beforeEach() handler fails. Only after handlers for the same level as the failure and above should run.
* embedded images as data URIs
* rake task to generate multipart js file with embeded images for IE
* move images into a separate directory outside of src or css and
keep them there for reference
* clean up Rakefile and ruby code
* .gitignore update
* don't penalize IE 8+ with an extra request to the ie-compat.js file
sathify
Matias Niemelä
Vineet Kumar
Misko Hevery
Igor Minar
Igor Minar
Elliott Sprehn