Label animation

HTML

            
               <div class="input-block">
                <label class="input-block__element">
                  <span class="input-block__label">Dit navn</span>
                  <input
                    class="input-block__input"
                    type="text"
                    name="name"
                    required
                    tabindex="0"
                    data-input
                  />
                </label>
              </div>
            
          

SCSS

            
// Varibales for form styles
$form-height: 50px;
$input-p: 1.5rem;

.input-block {
  position: relative;
  margin-bottom: 4rem;

  &__element {
    height: $form-height;
    display: block;
  }

  &__label {
    font-size: 1.4rem;
    opacity: .7;
    display: block;
    position: absolute;
    top: $input-p;
    left: $input-p;
    z-index: 10;
    transition: transform $transition, font-size $transition;
    
    &.is-focused {
      transform: translateY(-3.5rem);
      font-size: 1.2rem;
      opacity: 1;
      
    }
  }

  &__input {
    padding: $input-p;
    height: $form-height;
    outline: 0;
    border: 1px solid #e0e4dc;
    width: 100%;
  }
}
      
          

TypeScript - FocusLabelModule.ts

            
export class focusLabelModule {

    inputElement: NodeList = document.querySelectorAll('[data-input]');

    constructor() {
        this.focusLabel();
    }

    public focusLabel() {
        for (let i = 0; i < this.inputElement.length; i++) {

            const el = this.inputElement[i];

            el.addEventListener('focus', (e) => {
                const target: any = e.target;
                target.previousSibling.classList.add('is-focused');
            });

            el.addEventListener('blur', (e) => {
                const inputValue: any = e.target;

                if (inputValue.value === "") {
                    inputValue.previousSibling.classList.remove('is-focused');
                }
            });
        }
    }
}