fix: finish animation/transitions for elements (#2632)

src/css/IPropertyDescriptor.ts

@@ -1,8 +1,8 @@
 import {CSSValue} from './syntax/parser';
-import {CSSTypes} from './types/index';
+import {CSSTypes} from './types';
 import {Context} from '../core/context';
 
-export enum PropertyDescriptorParsingType {
+export const enum PropertyDescriptorParsingType {
     VALUE,
     LIST,
     IDENT_VALUE,

src/css/index.ts

@@ -57,6 +57,7 @@ import {Tokenizer} from './syntax/tokenizer';
 import {Color, color as colorType, isTransparent} from './types/color';
 import {angle} from './types/angle';
 import {image} from './types/image';
+import {time} from './types/time';
 import {opacity} from './property-descriptors/opacity';
 import {textDecorationColor} from './property-descriptors/text-decoration-color';
 import {textDecorationLine} from './property-descriptors/text-decoration-line';
@@ -71,6 +72,7 @@ import {contains} from '../core/bitwise';
 import {content} from './property-descriptors/content';
 import {counterIncrement} from './property-descriptors/counter-increment';
 import {counterReset} from './property-descriptors/counter-reset';
+import {duration} from './property-descriptors/duration';
 import {quotes} from './property-descriptors/quotes';
 import {boxShadow} from './property-descriptors/box-shadow';
 import {paintOrder} from './property-descriptors/paint-order';
@@ -79,6 +81,7 @@ import {webkitTextStrokeWidth} from './property-descriptors/webkit-text-stroke-w
 import {Context} from '../core/context';
 
 export class CSSParsedDeclaration {
+    animationDuration: ReturnType<typeof time.parse>;
     backgroundClip: ReturnType<typeof backgroundClip.parse>;
     backgroundColor: Color;
     backgroundImage: ReturnType<typeof backgroundImage.parse>;
@@ -138,6 +141,7 @@ export class CSSParsedDeclaration {
     textTransform: ReturnType<typeof textTransform.parse>;
     transform: ReturnType<typeof transform.parse>;
     transformOrigin: ReturnType<typeof transformOrigin.parse>;
+    transitionDuration: ReturnType<typeof time.parse>;
     visibility: ReturnType<typeof visibility.parse>;
     webkitTextStrokeColor: Color;
     webkitTextStrokeWidth: ReturnType<typeof webkitTextStrokeWidth.parse>;
@@ -145,6 +149,7 @@ export class CSSParsedDeclaration {
     zIndex: ReturnType<typeof zIndex.parse>;
 
     constructor(context: Context, declaration: CSSStyleDeclaration) {
+        this.animationDuration = parse(context, duration, declaration.animationDuration);
         this.backgroundClip = parse(context, backgroundClip, declaration.backgroundClip);
         this.backgroundColor = parse(context, backgroundColor, declaration.backgroundColor);
         this.backgroundImage = parse(context, backgroundImage, declaration.backgroundImage);
@@ -213,6 +218,7 @@ export class CSSParsedDeclaration {
         this.textTransform = parse(context, textTransform, declaration.textTransform);
         this.transform = parse(context, transform, declaration.transform);
         this.transformOrigin = parse(context, transformOrigin, declaration.transformOrigin);
+        this.transitionDuration = parse(context, duration, declaration.transitionDuration);
         this.visibility = parse(context, visibility, declaration.visibility);
         this.webkitTextStrokeColor = parse(context, webkitTextStrokeColor, declaration.webkitTextStrokeColor);
         this.webkitTextStrokeWidth = parse(context, webkitTextStrokeWidth, declaration.webkitTextStrokeWidth);
@@ -306,6 +312,8 @@ const parse = (context: Context, descriptor: CSSPropertyDescriptor<any>, style?:
                 case 'length-percentage':
                     const value = parser.parseComponentValue();
                     return isLengthPercentage(value) ? value : ZERO_LENGTH;
+                case 'time':
+                    return time.parse(context, parser.parseComponentValue());
             }
             break;
     }

src/css/property-descriptors/duration.ts

@@ -0,0 +1,9 @@
+import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+
+export const duration: IPropertyTypeValueDescriptor = {
+    name: 'duration',
+    initialValue: '0s',
+    prefix: false,
+    type: PropertyDescriptorParsingType.TYPE_VALUE,
+    format: 'time'
+};

src/css/property-descriptors/overflow-wrap.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum OVERFLOW_WRAP {
+export const enum OVERFLOW_WRAP {
     NORMAL = 'normal',
     BREAK_WORD = 'break-word'
 }

src/css/syntax/tokenizer.ts

@@ -2,7 +2,7 @@
 
 import {fromCodePoint, toCodePoints} from 'css-line-break';
 
-export enum TokenType {
+export const enum TokenType {
     STRING_TOKEN,
     BAD_STRING_TOKEN,
     LEFT_PARENTHESIS_TOKEN,

src/css/types/index.ts

@@ -1 +1 @@
-export type CSSTypes = 'angle' | 'color' | 'image' | 'length' | 'length-percentage';
+export type CSSTypes = 'angle' | 'color' | 'image' | 'length' | 'length-percentage' | 'time';

src/css/types/time.ts

@@ -0,0 +1,20 @@
+import {CSSValue} from '../syntax/parser';
+import {TokenType} from '../syntax/tokenizer';
+import {ITypeDescriptor} from '../ITypeDescriptor';
+import {Context} from '../../core/context';
+
+export const time: ITypeDescriptor<number> = {
+    name: 'time',
+    parse: (_context: Context, value: CSSValue): number => {
+        if (value.type === TokenType.DIMENSION_TOKEN) {
+            switch (value.unit.toLowerCase()) {
+                case 's':
+                    return 1000 * value.number;
+                case 'ms':
+                    return value.number;
+            }
+        }
+
+        throw new Error(`Unsupported time type`);
+    }
+};

src/dom/element-container.ts

@@ -21,10 +21,21 @@ export class ElementContainer {
         this.styles = new CSSParsedDeclaration(context, window.getComputedStyle(element, null));
         this.textNodes = [];
         this.elements = [];
-        if (this.styles.transform !== null && isHTMLElementNode(element)) {
-            // getBoundingClientRect takes transforms into account
-            element.style.transform = 'none';
+
+        if (isHTMLElementNode(element)) {
+            if (this.styles.animationDuration > 0) {
+                element.style.animationDuration = '0s';
+            }
+            if (this.styles.transitionDuration > 0) {
+                element.style.transitionDuration = '0s';
+            }
+
+            if (this.styles.transform !== null) {
+                // getBoundingClientRect takes transforms into account
+                element.style.transform = 'none';
+            }
         }
+
         this.bounds = parseBounds(this.context, element);
         this.flags = 0;
     }