Я пытался заставить Angular-анимацию делать то, что я хочу, но, похоже, очень мало ресурсов для достижения такой функциональности, по крайней мере, я смог найти.По сути, я хочу, чтобы мой контейнер вырос до конечного масштаба, НО, чтобы он рос только на одной стороне в направлении X.Надеюсь, этот базовый рисунок демонстрирует то, что я имею в виду:
Начальный: || ………………………
Окончательный: | ……………………… |(Растет слева -> Справа)
Ниже приведен мой код, который ПРАВИЛЬНО приводит к увеличению контейнера с его значением Х от 0 до полноразмерного, НО будет расти только с СРЕДНЕГО -> ВЫХОД.
Html:
<div [@simpleFadeRightAnimation]="'in'"
style="border-bottom: solid; border-color: white; border-width: 2px;"></div>
TypeScript:
trigger('simpleFadeRightAnimation', [
state('in', style({ opacity: 1, transform: 'scale(1, 1)' })),
transition(':enter', [
style({ opacity: 0, transform: 'scale(0, 1)' }),
animate('0.5s 1s')
]),
])
Я попытался добавить «float: left» и «left»: 0px ”стили для div, который будет подвергаться изменениям, чтобы попытаться заставить все внутри него выравниваться по левому краю, и затем произойдет увеличение вправо, поскольку левый будет привязан.Оба не дают желаемого результата (float заставляет div исчезнуть, а left не оказывает никакого влияния).Использование scaleX вместо масштаба также приводит к тому же, слегка некорректному поведению.
Есть идеи?Любая помощь будет принята с благодарностью, так как я очень новичок в анимации!