在 Angular 中转换 CSS 类？答案

【问题标题】：Transition CSS classes in Angular?在 Angular 中转换 CSS 类？
【发布时间】：2020-01-26 03:27:57
【问题描述】：

我有一个链接到我的组件的类，当使用向下滚动一定量时进行更改，并且当它添加边框时。反正有过渡边界吗？我尝试在导航栏--项目类和固定类上都进行转换。

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

【问题讨论】：

标签： html css angular class sass

【解决方案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 */
}

【讨论】：