Transition CSS classes in Angular?

Question

I have a class that I linked to my component to change when the use scrolls down a certain amount, and when it does I add a border. Is there anyway to transition the border? I tried to put the transition on both the navbar--items class and the fixed class.

<nav class='navbar'>
  <ul class='navbar__items' [class.fixed]="fixed">
    <li class='navbar__item'>About</li>
    <li class='navbar__item'>Portfolio</li>
  </ul>
</nav>

and for the SCSS

.navbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem 2rem;


  &__items {
    width: 95vw;
    padding: 1rem 2rem;
    padding-left: 4rem;
    list-style: none;
    display: flex;
    align-items: center;
  }
}

.fixed {
  border: 1px solid rgba($color-black, .2);
  box-shadow: 0 .2rem .5rem rgba($color-black, .2);
}

Basile Bong · Accepted Answer · 2019-09-25 22:29:12Z

1

You can make a transition on the border-width. To do so change/add the CSS below.

In this blog post you can find several solutions for border animations: https://css-tricks.com/animating-border/

.navbar__items {
   /* .. your code */
   border: 0px solid green;
   transition: 0.3s ease-in-out;
}

.fixed {
  border-width: 10px;
  /* ... your code */
}

answered Sep 25, 2019 at 22:29

Basile Bong

742 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Transition CSS classes in Angular?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related