html - 在 Angular 中转换 CSS 类？

Question

我有一个链接到我的组件的类，当使用向下滚动一定数量时，我会更改它，当它添加边框时。反正有过渡边界吗？我试图将转换同时放在导航栏元素类和固定类上。

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

和 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);
}

Answer 1

您可以在边框宽度上进行过渡。为此更改/添加下面的 CSS。

在这篇博文中，您可以找到几种边框动画的解决方案: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 */
}