fix: multi arg transition/animation duration (#2657)

This commit is contained in:
Niklas von Hertzen 2021-08-14 14:05:15 +08:00 committed by GitHub
parent 68377b3244
commit 1b55ed5668
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 10 deletions

View File

@ -82,7 +82,7 @@ import {webkitTextStrokeWidth} from './property-descriptors/webkit-text-stroke-w
import {Context} from '../core/context'; import {Context} from '../core/context';
export class CSSParsedDeclaration { export class CSSParsedDeclaration {
animationDuration: ReturnType<typeof time.parse>; animationDuration: ReturnType<typeof duration.parse>;
backgroundClip: ReturnType<typeof backgroundClip.parse>; backgroundClip: ReturnType<typeof backgroundClip.parse>;
backgroundColor: Color; backgroundColor: Color;
backgroundImage: ReturnType<typeof backgroundImage.parse>; backgroundImage: ReturnType<typeof backgroundImage.parse>;
@ -143,7 +143,7 @@ export class CSSParsedDeclaration {
textTransform: ReturnType<typeof textTransform.parse>; textTransform: ReturnType<typeof textTransform.parse>;
transform: ReturnType<typeof transform.parse>; transform: ReturnType<typeof transform.parse>;
transformOrigin: ReturnType<typeof transformOrigin.parse>; transformOrigin: ReturnType<typeof transformOrigin.parse>;
transitionDuration: ReturnType<typeof time.parse>; transitionDuration: ReturnType<typeof duration.parse>;
visibility: ReturnType<typeof visibility.parse>; visibility: ReturnType<typeof visibility.parse>;
webkitTextStrokeColor: Color; webkitTextStrokeColor: Color;
webkitTextStrokeWidth: ReturnType<typeof webkitTextStrokeWidth.parse>; webkitTextStrokeWidth: ReturnType<typeof webkitTextStrokeWidth.parse>;

View File

@ -1,9 +1,14 @@
import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor'; import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
import {CSSValue, isDimensionToken} from '../syntax/parser';
import {time} from '../types/time';
export const duration: IPropertyTypeValueDescriptor = { export const duration: IPropertyListDescriptor<number[]> = {
name: 'duration', name: 'duration',
initialValue: '0s', initialValue: '0s',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.TYPE_VALUE, type: PropertyDescriptorParsingType.LIST,
format: 'time' parse: (context: Context, tokens: CSSValue[]) => {
return tokens.filter(isDimensionToken).map((token) => time.parse(context, token));
}
}; };

View File

@ -23,10 +23,10 @@ export class ElementContainer {
this.elements = []; this.elements = [];
if (isHTMLElementNode(element)) { if (isHTMLElementNode(element)) {
if (this.styles.animationDuration > 0) { if (this.styles.animationDuration.some((duration) => duration > 0)) {
element.style.animationDuration = '0s'; element.style.animationDuration = '0s';
} }
if (this.styles.transitionDuration > 0) { if (this.styles.transitionDuration.some((duration) => duration > 0)) {
element.style.transitionDuration = '0s'; element.style.transitionDuration = '0s';
} }

View File

@ -40,7 +40,7 @@
.animated.working p { .animated.working p {
animation-name: rotate0; animation-name: rotate0;
animation-duration: 1ms; animation-duration: 1ms, 1ms;
animation-play-state: paused; animation-play-state: paused;
} }
@ -51,7 +51,7 @@
} }
.transitioned p { .transitioned p {
transition: 1ms; transition: 1ms, 1ms;
transform: rotate(45deg) transform: rotate(45deg)
} }