代码之家 › 专栏 › 技术社区 › tilly

角度:向组件添加动画时组件消失

animation angular

tilly · 技术社区 · 7 年前

有人能看出我错在哪里吗?

@Component({
    selector: 'find-locals',
    styleUrls: ['find-locals.component.css'],
    templateUrl: 'find-locals.component.html',
  animations: [
    trigger('tijl', [
      state('start', style({
        opacity: 0
      })),
      transition(':enter', [
        animate(2000)
      ])
    ])
  ]
})

<div @tijl class="header-box header-box--left">
                <h3 class="profileSection__data">Content</h3>
              </div>

2 回复 | 直到 7 年前

user184994 7 年前

我设法使它与以下内容一起工作:

  animations: [
    trigger('tijl', [
      state('start', style({
        opacity: 0
      })),
      transition(':enter', [
        style({ opacity: '0' }),
        animate(2000)
      ])
    ])
  ]

Here is a Stackblitz demo

Muhammed Albarmavi 7 年前

这边试试

animations: [
    trigger('tijl', [
      transition(':enter', [
        style({ opacity: '0' }),
        animate(2000)
      ])
    ])
  ]

动画将在2秒钟内还原样式

stackblitz demo

推荐文章

mikko · SwiftUI如何在不同堆栈中实现同一视图的平滑动画

8 月前

Nejib Afdhal · 如何在带有类名的react native中使用顺风动画?

8 月前

user54097 · 滚动菜单项上的导航栏动画文本徽标

1 年前

Simplicissimus · 如何使用javascript为svg转换计时

1 年前

LetsBeHappy · 高CPU的圆形渐变动画

1 年前

Toniq · css从上到中心设置动画

1 年前

Ongky Denny Wijaya · 绘制y=omega*x^2的动画,其中omega从-3到3不等

1 年前

Duck · 如何设置菜单从圆形到椭圆形的动画?

1 年前

MR Lappy · 提要动画最后出现空白

1 年前

Nithin Sai · 如何设置draggableScrollableSheet及其内容的动画?

1 年前