Хорошо ... Было нелегко найти четкое название для этой истории, но я думаю, что GIF может возобновить цель этого рассказа.
Если это то, что вы искали, вы попали в нужное место, так что продолжайте! Я дам вам ответ, чтобы создать этот потрясающий эффект, который мы находим повсюду в Интернете, но, к сожалению, с использованием jQuery.
Директива будет такой простой:
import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ selector: '[addAttributeOn]' }) export class BackgroundFadeInDirective { constructor(private element: ElementRef) { } @Input() myClassToAdd: string; @Input('addAttributeOn') elementIdToReach: string; @HostListener('window:scroll', []) onWindowScroll() { const elementOffsetTop = document.getElementById('toReach').offsetTop; if (elementOffsetTop <= window.pageYOffset) { this.element.nativeElement.classList.add(this.myClassToAdd); } else { this.element.nativeElement.classList.remove(this.myClassToAdd); } } }
Директива состоит из двух входов:
- elementIdToReach: это идентификатор элемента DOM, который вы хотите, чтобы Директива добавляла второй вход, который:
- myClassToAdd: имя класса, который вы хотите добавить / удалить из элемента, реализующего Директиву.
Обновление: если вы хотите добавить класс, когда нижняя часть вашего элемента достигнет верха следующего элемента, просто используйте this.element.nativeElement.offsetHeight, чтобы суммировать его с window.pageYOffset.
Возможно, мои имена директив или атрибутов недостаточно ясны для вас, просто измените их, но все это находится внутри «@HostListener». (Не забудьте добавить директиву в массив объявлений вашего модуля)
Теперь давайте посмотрим на HTML-реализацию директивы:
<nav [addAttributeOn]='"toReach"' myClassToAdd="background"> Your nav links </nav>
Все это! Только два входа, как явно написано в Директиве:
- [addAttributeOn] = ’” elementIdToReach ”’: здесь вы вставите идентификатор, обратите внимание, что вам нужны двойные кавычки, поскольку мы не используем переменную компонента.
- myClassToAdd = ”yourclass”: имя класса, который вы хотите добавить / удалить с указанным выше идентификатором.
Теперь нам просто нужен CSS с атрибутом transform, чтобы обработать эффект постепенного появления / исчезновения.
nav.background { background-color: rgba(brown, 0.9); } nav { position: fixed; top: 0; width: 100%; background-color: transparent; -webkit-transition: background .5s; -moz-transition: background .5s; -ms-transition: background .5s; -o-transition: background .5s; transition: background .5s;
Вот ваш потрясающий эффект, когда вы достигаете определенного элемента на Angular 4 без использования jQuery!
Я хотел сделать эту Директиву как можно более простой, вы, конечно, можете добавить атрибут перехода непосредственно внутри Директивы, добавить новый атрибут для цвета в качестве ввода и т. Д.
Надеюсь, это поможет некоторым изучающим Angular, таким как я, через Интернет :) повеселиться.