I followed the Angular2 tutorial to setup a local development environment with the quick start seed [1], which worked well. Then I decided to test animations using a shortened version of the first example in [2]. The app.component.ts looks like this and it toggles the background color by clicking:
import {
Component, trigger, state, style, transition, animate
} from '#angular/core';
#Component({
selector: 'my-app',
template: `<div [#heroState]="state" (click)="toggleState()">
<h1>TourOfHeroes</h1>
</div>
`,
animations: [
trigger('heroState', [
state('inactive', style({
backgroundColor: '#eee'
})),
state('active', style({
backgroundColor: '#cfd8dc'
})),
transition('inactive => active', animate('1000ms ease-in')),
transition('active => inactive', animate('1000ms ease-out'))
])
]
})
export class AppComponent {
state = 'active';
toggleState(){
this.state = (this.state === 'active' ? 'inactive' : 'active');
}
}
This works well in Chrome and Firefox, but not in IE11. There is no transition is IE11, the background changes instantly (see [3])
I did no project setup of my own and pretty much no coding either except for the inserted animation code. Is there any way to say why this doesn't work?
Thank you!
[1]: github .com/angular/quickstart/archive/master.zip
[2]: angular .io/docs/ts/latest/guide/animations.html
[3]: i.imgur .com/WU3rvEW.gif
PS: Stackoverflow doesn't let me post more than two links, you have to copy them yourselves ...
Angular animations use web animations API and IE does not support it.
http://caniuse.com/#feat=web-animation
https://angular.io/docs/ts/latest/guide/animations.html
You can add polyfill to get it working
https://github.com/web-animations/web-animations-js
Try these steps to perform animation in IE11:
Run npm install --save web-animations-js.
Add import 'web-animations-js in polyfills.ts add it yourself;
Your animation will work in IE10+, IE11 etc, browsers.
for more details refer below link -->
https://angular.io/guide/browser-support
Related
I'm developing a portfolio using Svelte, it did everything ok, then I found out I had to use SvelteKit instead of Svelte so I started over and copied pest every line from the original project files, then The splash screen animation has stopped working. The splash screen has SVG text in it, and I wanted the text borders to move and it did, but when I migrated the code to SvelteKit it stopped working.
I tried to understand what happened and correct the problem, but I couldn't ,if anyone has any idea what's going on, please share.
Update:
When i imported the Splash Screen component to a page in the project the animation worked but when i reload the animation don't work i am using +layout.svelte to make the animation appear every time reload the page.
the animeJS Code:
import { onMount } from "svelte";
import anime from 'animejs';
onMount(() => {
let tl = anime.timeline({
autoplay: true,
loop: true,
});
tl.add({
targets: ".lines path",
strokeDashoffset: [anime.setDashoffset, 0],
easing: "easeInOutSine",
duration: 1500,
delay: function (el, i) {
return i * 250;
},
direction: "alternate",
loop: true,
});
});
next/image changes too slow, so I see the old images and then new images appear. For this issue, I have referred below:
Next/Image's components are too slow to appear
Install sharp by running yarn add sharp in your project directory and then reboot the server by running next start again
All of them say I should use sharp.
So I have added sharp. My question is should I just install sharp and restart server? Do I not need to import sharp and do some code?
I actually tried this way below:
import Link from 'next/link';
import Image from 'next/image';
const sharp = require('sharp');
const CustomImage = ({ src, href}) => {
const rotateImage = () => {
sharp(src)
}
useEffect(() => {
rotateImage()
}, [])
return (
<Link href={href} passHref>
<span >
<Image src={rotateImage}/>
</span>
</Link>
);
};
export default CustomImage;
But it gives me this error:
Module not found: Can't resolve 'child_process'
How do I apply sharp in Next.js?
You just need to follow these two steps.
npm install sharp
NEXT_SHARP_PATH: "/tmp/node_modules/sharp"
Worked pretty well for me.
i have encountered an issue, when making a text editor with support of image based tags. There is a need to move those tags around freely in the text, which is being made impractical by this issue.
Basically when I start dragging an image, and then drop it on desired location, one of two results can happen: A) it works as intended and B) the image is dropped to the end/beginning of the sentence. You can see the behaviour in attached gif. Resulting behavior
I'm using react and typescript combination for creating the page with quill being inserted in a component.
// TextEditor/index.tsx
import * as React from 'react';
import * as Quill from 'quill';
import { TextEditorState, TextEditorProps } from '../#types';
import { generateDelta } from '../#utils/generateDelta';
const formats = [
'image'
];
class TextEditor extends React.Component<TextEditorProps, TextEditorState> {
constructor(props: TextEditorProps) {
super(props);
this.state = {
Editor: undefined
}
}
componentDidMount() {
const self = this;
this.setState({Editor: new Quill('#editor-container', {formats: formats, debug: 'warn'})});
}
changeText(text: string) {
if(typeof(this.state.Editor) !== 'undefined') {
this.state.Editor.setContents(generateDelta(text), 'api');
}
}
render() {
return (
<div id="editor-container"></div>
);
}
}
export default TextEditor;
And the usage of this component in another component is just
// editor.tsx
import TextEditor from '../QuillEditor/TextEditor';
...
onUpdate(text: string) {
this.refs.targetEditor.changeText(text);
}
...
render() {
return (
...
<TextEditor
ref={'targetEditor'}
/>
...
)
}
I have tried to change the text editor to just contentEditable div and that worked flawlessly, so it shouldn't be because of some css glitch.
Has anyone some idea of what could be causing this?
EDIT Feb 6:
I have found out, that this issue is manifesting only in Chrome, as IE and MS Edge did not encountered this issue. I have tried to switch off all extensions, yet the issue is still there. Private mode also didn't help.
After few days of research I have figured out what is causing the issue.
The combination of Quill and React won't work, because of the way React 'steals' input events, while creating the shadow DOM. Basically, because it tries to process my input in contenteditable div created by Quill, it causes some actions to not fire, resulting in the weird behaviour. And because Quill tries to do it by itself, outside of React DOM.
This I have proved in my simple testing project, where adding a simple input tag anywhere on the page broke down the Quill editor.
Possible solution would be to use react-quill or some other component container, however I haven't managed to make it successfully work, or write some yourself, which would incorporate Quill to React in its DOM compatible way.
I am a bit new to the world of ReactJS but I have been coding in Javascript for a while now. Loving what ReactJS is doing as I was coding in pure JS before using Design Patterns and OOP I consider this a HUGE upgrade for me.
A while ago I started using react-starter-kit from kriasoft.
Also I integrated react-bootstrap to this project to make my life a bit easier.
I followed the tutorial from react-bootstrap and I successfully added Bootstrap.
The problem is now I cannot use the build in <Link /> from react-starter-kit which I liked a lot because of its simplicity and "power".
The official approach from react-bootstrap is to install react-router-bootstrap and replace <Link to="/path"> with <LinkContainer to="/path"> but that means that I have to replace react-routing and universal-route with react-router, and this is something I would like to avoid.
What is the right way to integrate react-bootstrap with react-starter-kit and still be able to use universal-routing? What changes should I make in order to make LinkContainer behave as Link component does?
When using Link component from react-starter-kit a get this kind of error
Warning: validateDOMNesting(...): cannot appear as a descendant of . See Header > NavItem > SafeAnchor > a > ... > Link > a.
Related link for this issue .
(React-Bootstrap link item in a navitem)
The official recommendation from react-bootstrap, and react-router.
(https://github.com/ReactTraining/react-router/issues/83#issuecomment-214794477)
Also as I said I am a bit new to reactJS and there is the possibility I am missing something.
Would be nice if someone could clarify the difference between Link component from react-starter-kit
and Link from react-router.
Thanks in advance
I start using my own NavItem component instead of original:
import React, { PropTypes } from 'react';
import cx from 'classnames';
import Link from '../Link';
class NavItem extends React.Component {
static propTypes = {
className: PropTypes.string,
href: PropTypes.string.isRequired,
active: PropTypes.bool,
disabled: PropTypes.bool,
children: PropTypes.node.isRequired,
onClick: PropTypes.func,
};
static defaultProps = {
active: false,
disabled: false,
};
render() {
const { className, href, active, disabled, children, onClick } = this.props;
return (
<li role="presentation" className={cx(className, { active, disabled })}>
<Link to={href} onClick={onClick}>
{children}
</Link>
</li>
);
}
}
export default NavItem;
This is the approach I follow for now thanks to this post.
I'm working on a collapsable component, one that you can click to roll-up/down to show/hide details. The component is as follows:
// component.ts
import {Component, Directive, Input} from '#angular/core';
import {trigger, state, style, transition, animate} from '#angular/core'
#Component({
selector: 'expandable',
template: '<div *ngIf="isExpanded" #animate="'slide'"><ng-content></ng-content></div>',
animations: [
trigger('animate', [
state('slide', style({ overflow: 'hidden', height: '*' })),
transition('slide => void', [animate('200ms ease-out', style({ height: 0 }))]),
transition('void => slide', [style({ height: 0 }), animate('200ms ease-out', style({ height: '*' }))])
])
]
})
export class SimExpandable {
private _expanded: boolean = false;
#Input('expanded') set expanded(value: string | boolean) {
this._expanded = (value === 'true' || value === true);
}
get isExpanded(): boolean { return this._expanded }
}
The component works fine, partially. The animations, however, are not perfect. I've configured the component to use ease-out animation but in reality, the component animates linearly.
I've tried using ease-out, easeOut, ease-out-cubic, easeOutCubic, ease-in-out, easeInOut, bounce, and a lot of other permutations but the component still animates linearly. I REALLY need to use ease-out for my component. Any help would be really appreciated.
CSS properties transition and animation allow you to pick the easing
function. Unfortunately, they don’t support all easings and you must
specify the desired easing function yourself (as a Bezier curve).
Easings.net
It would seem that there are 4 default types of easing that should work.
linear
ease
ease-in
ease-out
ease-in-out
These work directly, however the differences are subtle
For more effective types of easing, you have to use a bezier-curve which allows you to create your own easing. For example the below is "easeInOutBack"
cubic-bezier(0.680, -0.550, 0.265, 1.550)
When using with Angular animate function
animate("1500ms 2000ms cubic-bezier(0.680, -0.550, 0.265, 1.550)", style({transform: "translateX(-100%)"}))
You can navigate to this bezier curver generator which should provide you with the ability to create your own easings.
Animate is no longer a part in angular/core.. so you have to import it, its part of the module ngAnimate .. so to use the $animate service you need to import js/lib/angular-animate.js libs.
bower install --save angular-animate