стиль
Объявляет объект «ключ/значение», содержащий свойства/стили CSS, которые затем можно использовать для анимации state, в рамках анимационной sequence или в качестве данных стилей для вызовов animate() и keyframes().
Предупреждение об устаревании
Вместо этого используйте animate.enter или animate.leave. Планируется удалить в версии 23
API
function style(
tokens:
| '*'
| { [key: string]: string | number }
| ('*' | { [key: string]: string | number })[],
): AnimationStyleMetadata;
Вместо этого используйте animate.enter или animate.leave. Планируется удалить в версии 23
"*" | { [key: string]: string | number; } | ("*" | { [key: string]: string | number; })[]Набор стилей CSS или HTML, связанных с состоянием анимации. Значение может быть одним из следующих:
- Пара «ключ-значение», связывающая свойство CSS со значением.
- Массив пар «ключ-значение».
- Звёздочка (*), указывающая на автоматическое применение стилей: стили берутся из анимируемого элемента и применяются к анимации при её запуске.
Автоматическое применение стилей можно использовать для определения состояния, зависящего от макета или других факторов среды.
AnimationStyleMetadata
Примечания по использованию
В следующих примерах создаются стили анимации, содержащие набор значений свойств CSS:
// string values for CSS properties
style({ background: "red", color: "blue" })
// numerical pixel values
style({ width: 100, height: 0 })
В следующем примере используется автоматическое применение стилей, чтобы анимировать элемент от высоты 0 до полной высоты:
style({ height: 0 }),
animate("1s", style({ height: "*" }))
Super-powered by Google ©2010–2025.
Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0.
https://angular.dev/api/animations/style
