Question

我想在我的角度应用显示之前添加一个2秒的动画（SVG动画）屏幕。因此，每次有人访问该URL时，前2秒钟将是动画的时间，然后将显示Angular应用程序。这可能吗？非常感谢您提供的任何帮助，谢谢，祝您生活愉快！

这是动画的代码：

HTML中的svg代码：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 700 680" width="700" height="680"><defs><clipPath id="_clipPath_wuO8YUgcuSMrLnSCtxnoIiXwy9UN2HRc"><rect width="700" height="680"/></clipPath></defs><g clip-path="url(#_clipPath_wuO8YUgcuSMrLnSCtxnoIiXwy9UN2HRc)"><g opacity="0.4"><path class="path1" d=" M 0 71.043 L 257.59 659.127 L 466.578 153.666 L 245.439 153.666" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="#c6c6c6" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="10"/></g></g></svg>

和CSS：

.path1{
    stroke-width:6;
    stroke-dasharray : 500;
    stroke-dashoffset : 1410.1248779296875;
    animation:test 6s linear alternate infinite;
}

@keyframes test{
    from{
        stroke-dashoffset:2351.569580078125; 
    }

    to{
        stroke-dashoffset:0;
    }
}

Answer 1

一个简单的解决方案是在应用程序组件中等待2秒钟，然后继续操作

app.component.html

<ng-container *ngIf="animated">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 700 680" width="700" height="680"><defs><clipPath id="_clipPath_wuO8YUgcuSMrLnSCtxnoIiXwy9UN2HRc"><rect width="700" height="680"/></clipPath></defs><g clip-path="url(#_clipPath_wuO8YUgcuSMrLnSCtxnoIiXwy9UN2HRc)"><g opacity="0.4"><path class="path1" d=" M 0 71.043 L 257.59 659.127 L 466.578 153.666 L 245.439 153.666" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="#c6c6c6" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="10"/></g></g></svg>
</ng-container>

<ng-container *ngIf="!animated">
<router-outlet></router-outlet>
</ng-container>

app.component.ts

export class AppComponent {

 animated = true;

  constructor() {
    setTimeout(() => {    // <<<---    using ()=> syntax
      this.animated = false;
      });
     }, 2000);
  }
}

加载Angular应用之前如何显示动画？

1 个答案: