Angular 6 z-index и проблемы с анимацией - PullRequest
Новая
       12

Angular 6 z-index и проблемы с анимацией

0 голосов
/ 16 октября 2018

У меня есть этот код:

https://stackblitz.com/edit/angular-u1ctge

со следующим кодом значка Font Awesome (для углового использования FortAwesome) 

<fa-icon [icon]='["fas","cogs"]' spin size='4x' style='z-index: 100; top: 10px; left: 60 px;'></fa-icon>

Я пытаюсь получитьвинтики, чтобы вращаться и винтики, чтобы плавать по содержанию.

Я застрял.

Любой ввод поможет.

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

Чтобы сделать вращение компонента fa-icon, вы должны добавить [spin]="true", как упомянуто в @ fortawesome / angular-fontawesome документации .

Вращающиеся винтики не будут выглядеть так, как вы ожидаете, он будет вращать весь значок как одно изображение, чтобы заставить винтики вращаться по отдельности, вам нужно создать несколько вращающихся иконок с нужным размером и в правильном положении.

Z-индекс не действует, если положениене является абсолютным.

Я предлагаю этот код в качестве исходного решения: 

<div style='position: absolute; z-index: 100; top: 50%; left: 40%;'>
  <fa-icon [icon]='["fas","cog"]' [spin]="true" size='4x'></fa-icon>
  <fa-icon [icon]='["fas","cog"]' [spin]="true" size='2x'></fa-icon>
</div>

Вот правка вашего стекаблита.

0 голосов
/ 16 октября 2018

вам нужно изменить это значение на: 

<fa-icon [icon]='["fas","cogs"]' size='4x' class="fa-spin" style='z-index: 100; top: 10px; left: 60 px; position: absolute;'></fa-icon>

класс fa-spin необходим для вращения значка, но я думаю, вам понадобится еще один значок, так как весь значок вращается, и вы, вероятно, хотелиих вращать отдельно.(не совсем уверен в этом, никогда не делал ничего с использованием шрифта awesome)

также я надеюсь, что абсолютное позиционирование - это то, что вы имели в виду с помощью float для контента

...