mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-16 01:21:37 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix animation issues

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-07-23 13:52:29 +02:00
parent 8d5fd9306f
commit 91a11b6997
No known key found for this signature in database
GPG key ID: 55C211A1226CB17D
1 changed files with 20 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/views/elements/ImageView.tsx
View file

@ -86,10 +86,10 @@ export default class ImageView extends React.Component<IProps, IState> {
constructor(props) {
super(props);
const { thumbnailInfo, width } = this.props;
const { thumbnailInfo } = this.props;
this.state = {
zoom: thumbnailInfo?.width / width ?? 0,
zoom: 0, // We default to 0 and override this in imageLoaded once we have naturalSize
minZoom: MAX_SCALE,
maxZoom: MAX_SCALE,
rotation: 0,
@ -120,7 +120,8 @@ export default class ImageView extends React.Component<IProps, IState> {
private previousX = 0;
private previousY = 0;
private loaded = false;
private animatingLoading = false;
private imageIsLoaded = false;
componentDidMount() {
// We have to use addEventListener() because the listener
@ -139,12 +140,25 @@ export default class ImageView extends React.Component<IProps, IState> {
}
private imageLoaded = async () => {
// First, we calculate the zoom, so that the image has the same size as
// the thumbnail
const { thumbnailInfo } = this.props;
if (thumbnailInfo?.width) {
await this.setState({ zoom: thumbnailInfo.width / this.image.current.naturalWidth });
}
// Once the zoom is set, we the image is considered loaded and we can
// start animating it into the center of the screen
this.imageIsLoaded = true;
this.animatingLoading = true;
this.setZoomAndRotation();
await this.setState({
translationX: 0,
translationY: 0,
});
this.loaded = true;
// Once the position is set, there is no need to animate anymore
this.animatingLoading = false;
};
private recalculateZoom = () => {
@ -394,8 +408,8 @@ export default class ImageView extends React.Component<IProps, IState> {
const zoomingDisabled = this.state.maxZoom === this.state.minZoom;
let transition;
if (!this.loaded) transition = "transform 300ms ease 0s";
else if (this.state.moving) transition = null;
if (this.animatingLoading) transition = "transform 300ms ease 0s";
else if (this.state.moving || !this.imageIsLoaded) transition = null;
else transition = "transform 200ms ease 0s";
let cursor;