I am trying to do a simple transition using angular 5. The transition itself is working but when I try to adjust the ease-in / ease out period of the transition. My setup is based off of the angular documentation, so I am really at loss as to why the transition time isn't changing.
component.ts
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
animations: [
trigger('homeState', [
state('hide', style({
backgroundColor: '#eee',
transform: 'translateX(0%)'
})),
state('show', style({
backgroundColor: '#cfd8dc',
transform: 'translateX(100%)'
})),
transition('show => hide', animate('6000ms ease-out')),
transition('hide => show', animate('1000ms ease-in'))
])
]
})
component.html
<h1 [#homeState]="stateName">{{title}}</h1>
<button (click)="toggle()"></button>
The toggle function changes between the show and hide states. Can someone please point me in the right direction? thanks.
UPDATE:
Okay, so I have done some more digging. I downloaded the source code of the animations. The source code has the easing effect working. So i copied that code over to my project and still the ease effect is not working. But when I copied my original code over to the animations project everything works.
Your global Angular CLI version (1.7.4) is greater than your local
version (1.6.5). The local Angular CLI version is used.
Okay, I finally figured it out. I had the noop testing module as well as the regular angular animations in my file (this is my fault, I copied someone else's setup without fully understanding what I was doing). The noop is a no operation module used solely for testing.
more info:
What's the difference between BrowserAnimationsModule and NoopAnimationsModule?
Once I removed this from my app.module.ts all was good:
import { NoopAnimationsModule } from '#angular/platform-browser/animations';
I hope this helps someone down the road.
Related
I have an Animation class given below:
import { trigger, state, style, transition, animate } from '#angular/animations';
export class Animations {
constructor() {}
animate = animate('.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)');
side() {
return trigger(`visibilityAnimation`, [
state('false', style({
transform: '{{ side }}',
display: 'none'
}), { params: { side: 'translateX(100%)' } }),
state('true', style({
transform: 'translateX(0)',
display: 'block'
})),
transition('false <=> true', this.animate),
]);
}
top() {.....}
chooseAnimation() {....}
background() {....}
}
In one of my components I'm using as follows:
import { Animations } from './animations';
const animations = new Animations();
#Component({
selector: 'app-nav-user',
templateUrl: './nav-user.component.html',
styleUrls: ['./nav-user.component.scss'],
animations: [
animations.chooseAnimation(),
animations.background()
]
})
When I use ng build --prod --aot --output-hashing=all, I get the above error.
Note: I'm using angular cli v7.
I had a similar situation happen to me while trying to code parameterized animations. Writing a function that returns the animation object is the intuitive thing to do, and after the error you would think storing the return in a constant and passing that to the decorator would work, but it doesn't with AOT. The reason has to do with the ordem of the compilation, so to speak. The AOT compiler will resolve metadata first, and it wont deal with function calls at all, so even if you try to resolve it outside of the decorator, it's all the same.
So what you should do is export the trigger(...) object as a constant and use the animation option params to do all necessary configurations, like you did with the side parameter in your example.
I can't really help you with much more, as you didn't share the part of the code actually triggering the error, the chooseAnimation method, but you should be able to get the idea behind it, as you already know how to use the options.
I had the same problem, so I'm just expanding on the answer by #Henrique Erzinger, which helped me solve it.
All you need to do is make sure there are no user-defined parameters in an animation function - in other words, all the parameters are (so to say) hardcoded.
Your function fadeIn, for example, can be called from the decorator by using animations: [fadeIn()] in the decorator, but the function definition itself cannot take any parameters.
// this WILL work
export function fadeIn(): AnimationTriggerMetadata {
return trigger('fadeIn', [
transition(':enter', [
// only static code, no variables allowed ...
])
]);
}
// this will NOT work
export function fadeIn(time = 300): AnimationTriggerMetadata {
return trigger('fadeIn', [
transition(':enter', [
group([
animate(time + 'ms' .... // NOT allowed
])
]);
}
I created a tab-based Ionic 2 project and I'm using the following lifecycle hooks to define a trigger property for animations to occur when a given page loads:
ionViewDidEnter() {
this.state = 'active';
console.log(this.state);
}
ionViewWillLeave() {
this.state = 'inactive';
console.log(this.state);
}
This is what the animations looks like in the component decorator:
animations: [
trigger('focusPanel', [
state('inactive', style({
opacity: '0'
})),
state('active', style({
transform: 'translateY(-80px)',
opacity: '1'
})),
transition('* <=> active', animate('.5s ease-out'))
]),
]
This works when the app loads. I can click on a different tab and go back, and the animation works as expected.
However, if I go back a third time, while the console.log is accurate and consistent, the animations no longer play. It doesn't fade from 0 opacity, and it does not animate up based on translateY.
Any idea of what's going on? I've tried different lifecycle hooks, as well as different transition() properties in the animations above.
I'm still new to Angular 2 and was wondering if there is a way to let a component 'fly in' and let another component 'fly out' when switching routes. Let's say I have 2 components: Test1Component and Test2Component and 2 routes pointing to each of them. What would be the best way to do it?
https://github.com/angular/angular/issues/9845#issuecomment-235799008
RC5 will hopefully be out this week, if not then next week.
For now (with RC5) you will need to do this for every component that
is routed to and you want to add animations to:
#Component({
host: {
'[#routeAnimation]': 'true'
},
animations: [
trigger('routeAnimation', [
transition('* => void', animate(...)),
transition('void => *', animate(...))
])
]
})
class Cmp { }
Once we get query() and $variables into animations then you can use
<router-outlet> with the URL API that I wrote above.
Researching the error,
"EXCEPTION: TypeError: tagDef.requireExtraParent is not a function"
and it actually returns 0 results on Google.
Background:
site works fine on Chrome and Safari. haven't tested IE yet. whole separate nightmare there.
error is only for Firefox (seems all versions. Currently on 45 though)
I'm converting from TypeScript down to ES5 using System, following along with the Angular quickstart
On a mac if that matters
Angular2, beta 9
The site is very basic. I've removed all possible complications and it appears that the error is just in bootstrapping itself. Perhaps a missing polyfill?
index.html
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {
'js': {
defaultExtension: 'js'
}
}
});
System.import('js/main')
.then(null, console.error.bind(console));
main.ts (entry point)
/// <reference path="../../node_modules/angular2/typings/browser.d.ts" />
import {HTTP_PROVIDERS} from 'angular2/http';
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app/components/app';
import 'rxjs/Rx'
bootstrap(AppComponent, [HTTP_PROVIDERS]); // if i comment this out, the error disappears indicating that it lives somewhere in app.ts.
app.ts
import {Component} from 'angular2/core';
#Component({
selector: "myapp",
templateUrl: "templates/app.html",
directives: [],
providers: []
})
export class AppComponent {}
What have I tried
Adding some additional polyfills, like html_parser which appears to be where the requireExtraParent method is defined.
<script type="text/javascript" src="dist/lib/html_parser.js"></script>
Eliminate any compilation/transpiling errors.
Digging so deep that Google can't even find anything.
Your solution is spoton
<script type="text/javascript" src="dist/lib/html_parser.js"></script>
The problem was that I was using a reserved word in Angular as a tag (watch).
<services></services>
<collage></collage>
<watch></watch> <== problem
<collage></collage>
changing it to this works:
<services></services>
<collage></collage>
<watchit></watchit> <== works fine
<collage></collage>
this was impossible to debug. i had to go line by line commenting things out until eventually i figured out it was in the html, and eventually which line in particular introduced the problem.
posting only so if someone else hits this, they don't go so crazy.
I am building a Rails 3.2.11 app with Flot. I want to render my Flot charts in PDFs using Prawn. My Flot charts render in the browser fine. I can create Prawn PDFs fine (though not with chart images yet).
I want to use the Flot canvas plugin to render my axes, etc. on the canvas so they are included when I Ajax the image data to the server using the .getCanvas() and .toDataURL() methods, but I can’t seem to get it to work.
I am using jquery.flot.min.js 0.8.0 and jquery.flot.canvas.min.js (no version indicated). In the Chrome console I see that both are loading.
My Coffeescript looks like this:
temp_plot = $.plot $("#barchart"), [
data: $("#barchart").data("bardata")
bars:
show: true
barWidth: (365/12)*24*60*60*1000*0.8
align: 'center'
],
xaxis:
mode: "time"
timeformat: "%b"
tickSize: [1, "month"]
yaxis:
position: 'right'
labelWidth: '40'
reserveSpace: true
canvas: true
barchart_canvas = temp_plot.getCanvas()
I am able to see the Ajax payload and it is indeed the Flot chart canvas, just without the axes, etc. I appreciate any advice. Thanks!
Just to be extra clear, code as Javascript looks like this:
var barchart_canvas, temp_plot;
temp_plot = $.plot($("#barchart"), [
{
data: $("#barchart").data("bardata"),
bars: {
show: true,
barWidth: (365 / 12) * 24 * 60 * 60 * 1000 * 0.8,
align: 'center'
}
}
], {
xaxis: {
mode: "time",
timeformat: "%b",
tickSize: [1, "month"]
},
yaxis: {
position: 'right',
labelWidth: '40',
reserveSpace: true
},
canvas: true
});
barchart_canvas = temp_plot.getCanvas();
UPDATE - SUCCESS
I updated Flot to 0.8.1 and included the jquery.flot.canvas.js file that came in the 0.8.1 .zip archive. (I was getting some strange rendering behavior using plugins from Flot 0.8.0 with jquery.flot.js 0.8.1, so watch out for that.)
Now my axes render on the canvas. Great! My thanks to the Flot gods!
Your options look okay, assuming (I'm not familiar with CoffeeScript) that last bit is supposed to be missing curly braces.
Your Flot version can't be 1.1, though; the latest is 0.8.1, and jquery.flot.canvas.min.js was introduced in 0.8.0. So you're using either the wrong version, or some Flot-derivative that may not support the canvas plugin.
Note that the canvas plugin currently only affects the axes; the legend is still rendered in HTML. Complete support for rendering everything on canvas will come in 0.9.