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';
export class CSSParsedDeclaration {
animationDuration: ReturnType<typeof time.parse>;
animationDuration: ReturnType<typeof duration.parse>;
backgroundClip: ReturnType<typeof backgroundClip.parse>;
backgroundColor: Color;
backgroundImage: ReturnType<typeof backgroundImage.parse>;
@ -143,7 +143,7 @@ export class CSSParsedDeclaration {
textTransform: ReturnType<typeof textTransform.parse>;
transform: ReturnType<typeof transform.parse>;
transformOrigin: ReturnType<typeof transformOrigin.parse>;
transitionDuration: ReturnType<typeof time.parse>;
transitionDuration: ReturnType<typeof duration.parse>;
visibility: ReturnType<typeof visibility.parse>;
webkitTextStrokeColor: Color;
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',
initialValue: '0s',
prefix: false,
type: PropertyDescriptorParsingType.TYPE_VALUE,
format: 'time'
type: PropertyDescriptorParsingType.LIST,
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 = [];
if (isHTMLElementNode(element)) {
if (this.styles.animationDuration > 0) {
if (this.styles.animationDuration.some((duration) => duration > 0)) {
element.style.animationDuration = '0s';
}
if (this.styles.transitionDuration > 0) {
if (this.styles.transitionDuration.some((duration) => duration > 0)) {
element.style.transitionDuration = '0s';
}

View File

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