Angular 4.2.0-rc.0 is out and this version includes the new animation features that are used in this demo.
http://bit.ly/ng-conf-2017-demo
npm install @angular/cli -g
git clone
and runnpm i
run ng serve
Angular 4.2.0-rc.0 is out and this version includes the new animation features that are used in this demo.
http://bit.ly/ng-conf-2017-demo
npm install @angular/cli -g
git clone
and run npm i
run ng serve
hey man, before everything just wanted to say a good job on animations, I really love it!
So here's my problem, I followed your project here and I am getting this error "ERROR in Recursion not supported, resolving symbol LayoutComponent". Probably I did something wrong here, but I think query in the query isn't something that's working here.
Here's my code below:
trigger('routerAnimations', [
transition('* => *', [
query(':enter, :leave',
style({
position: 'absolute',
top: 0,
left: 0,
right: 0
}), {
optional: true
}),
query(':enter .project', [
style({
opacity: 1,
transform: 'translate(0%, 150px) matrix(1.0, 0.07, 0, 1, 0, 0)'
})
]),
query(':enter', [
style({
opacity: 1
}),
query('.project', [
style({
opacity: 0,
transform: 'translate(0%, 150px) matrix(1.0, 0.07, 0, 1, 0, 0)'
})
], {
optional: true
}),
query('.resources__open-sources .card', [
style({
opacity: 0,
transform: 'translate(0%, -50px) matrix(1.0, 0.07, 0, 1, 0, 0)'
})
], {
optional: true
}),
query('.content__header-intro h2 span', [
style({
opacity: 0,
transform: 'translate(0%, 100%) matrix(1.0, 0.07, 0, 1, 0, 0)'
})
], {
optional: true
})
], {
optional: true
}),
query(':leave', [
animate('400ms cubic-bezier(.17,.67,.27,1.2)', style({
opacity: 0
}))
], {
optional: true
}),
group([
query(':enter', [
animate('400ms cubic-bezier(.17,.67,.27,1.2)', style('*'))
], {
optional: true
}),
query(':enter .project', [
stagger(50, [
animate('400ms cubic-bezier(.17,.67,.27,1.2)', style('*'))
])
], {
optional: true
}),
query(':enter .resources__open-sources .card', [
stagger(50, [
animate('400ms cubic-bezier(.17,.67,.27,1.2)', style('*'))
])
], {
optional: true
}),
query(':enter .content__header-intro h2 span', [
stagger(50, [
animate('400ms cubic-bezier(.17,.67,.27,1.2)', style('*'))
])
], {
optional: true
})
])
])
])
Should this example app work with angular 4.1.0?
I tried this and got a bunch of errors:
e.g.
/@angular/animations/animations"' has no exported member 'wait'
Have you tried running it in safari? Is it buggy simply because you didn't optimize it, or is it because of some buggy polyfill or something?
cc @matsko
First of all.. nice demo of animation..
Everything is working fine. If suppose the scroll position in each page is to be remembered, then what should be done? In current design it is not supported.
Since matches is not available on Element (in the TransitionAnimationEngine: \node_modules@angular\animations@angular\animations\browser.js:4038), I had to add a polyfill for matches into polyfills.ts (copied from MDN) to work with IE11:
if (!Element.prototype.matches) {
Element.prototype.matches =
(Element.prototype).matchesSelector ||
(Element.prototype).mozMatchesSelector ||
(Element.prototype).msMatchesSelector ||
(Element.prototype).oMatchesSelector ||
(Element.prototype).webkitMatchesSelector ||
function (s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) { }
return i > -1;
};
}
First of all, good demo.
The current angular version of this demo project is 4.2.0-rc.1 and it works fine.
But when I update to angular version 4.2.5, there is an error running the demo.
The error occurs when I switch between two routes before each routerAnimation completed
Here is the console error message:
ERROR Error: animation building failed:
query(".image")returned zero elements. (Use
query(".image", { optional: true })if you wish to allow this.)
How can I enable animation in lazy loaded modules?
If I add 'BrowserAnimationsModule' only into my app.module.ts, I get:
Error: Found the synthetic property @pageAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application
If I add 'BrowserAnimationsModule' both into app.module.ts and lazy-loaded.module.td, I get:
Error: BrowserModule has already been loaded
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.