ng4-animations-preview's People
Contributors
Stargazers
Watchers
Forkers
luizgsa21 jwelker110 nangal brannon-darby wanatchapong brijmcq freeman29 saabirmohamed nielsheeren power4webdesign locurasleal kattsushi shmuelios justmelnyc bernardo-cs nthonymiller areebaaroosh abizit ghostrider1124 taoteg jitsmaster iamonuwa worldox sezarmbar karangarg45 mihara0320 cloudinnovates vishalakhouri gandhigautam deanmiller psumal marcineck mjs19 cl974 jerbinavigo guibot17 yaravireyna zakiravian alchatti rajesnal shekharrajak tclur robertverdes cdscript rajarajankamban codercatdev cerkiranjoshi rajashekaradukanibluecloud parserbotng4-animations-preview's Issues
safari
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
Remember scroll
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.
Before routerAnimation completed and change route immediately
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. (Usequery(".image", { optional: true })if you wish to allow this.)
Element.prototype.matches undefined in IE10/IE11
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;
};
}
ng 4.1.0
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'
Recursion not supported
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
})
])
])
])
Route animation in lazy loaded modules
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
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.