Как оживить офигенный шрифт в угловых при наведении - PullRequest
Новая
       9

Как оживить офигенный шрифт в угловых при наведении

0 голосов
/ 16 января 2019

Мне нужно знать, как я могу масштабировать значок при наведении курсора. Обычно я использовал этот код sass: 

.social
  -webkit-transition-duration: 0.5s
  -moz-transition-duration: 0.5s
  -o-transition-duration: 0.5s
  -webkit-transform: scale(0.8)
  -moz-transform: scale(0.8)
  -o-transform: scale(0.8)
  &:hover
    -webkit-transform: scale(1.1)
    -moz-transform: scale(1.1)
    -o-transform: scale(1.1)

Он перестал работать, когда я начал использовать стандартную библиотеку awesome-font для Angular. Мой код: 

<a href="https://www.facebook.com/#/">
  <fa-icon id="social-fb"
           class="social"
           [icon]="['fab','facebook-square']"
           size="3x">
  </fa-icon>
</a>

Я новичок в Angular. Если этот вопрос глуп, мне очень жаль.

1 Ответ

0 голосов
/ 16 января 2019

Поскольку fa-icon является компонентом, он не применяет масштабирование, как с необработанным svg.

Вам нужно получить доступ к дочернему элементу в компоненте fa-icon. Попробуйте получить доступ к дочернему элементу svg - (я помню, что дочерний элемент - это элемент svg, но используйте ваши инструменты проверки, чтобы выяснить это точно) 

&:hover {
    > svg {
      transform: scale(1.1)
      -webkit-transform: scale(1.1)
      -moz-transform: scale(1.1)
      -o-transform: scale(1.1)
    }
}

Запомните значение по умолчанию transform: scale(1.1), оно поддерживается большинством современных браузеров.

...