小编Ros*_*ins的帖子

Ionic 2定制svg微调器在装载机中

我正在尝试将我的SVG添加到加载创建功能,但当我去查看它时,我看到的是一个空标记应该是什么.

let loading = this.loadingCtrl.create({spinner: ' ',
            content: this.appConfig.customSpinner })
Run Code Online (Sandbox Code Playgroud)

上面是我的创建代码,该变量是下面的SVG代码.

<svg id="Layer_3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2419 1188.4">
   <defs>
    <mask id="mask">
       <path fill="#000" d="M570.2 87.3L163.8 322c-15.6 9-25.2 25.6-25.2 43.6v469.3c0 18 9.6 34.6 25.2 43.6l406.4 234.7c15.6 9 34.7 9 50.3 0l406.4-234.7c15.6-9 25.2-25.6 25.2-43.6V365.6c0-18-9.6-34.6-25.2-43.6L620.5 87.3c-15.5-8.9-34.7-8.9-50.3 0z"/>

  <path fill="#000" d="M787.4 474.6V343.5H394.2v505.6h131V661.8h262.2v-131H525.2v-56.2z"/>
  <path fill="#000" d="M581.4 718h206v131.1h-206z"/>

    <circle fill="#fff" cx="0" cy="1450" r="551.3"/>
    </mask>
  </defs>
  <style> 
    .st2{fill:none;stroke-width:40;stroke-miterlimit:10;}
  </style>


 <path id="background" mask="url(#mask)" fill="#F16E18" d="M570.2 87.3L163.8 322c-15.6 9-25.2 25.6-25.2 43.6v469.3c0 18 9.6 34.6 25.2 43.6l406.4 234.7c15.6 9 34.7 …
Run Code Online (Sandbox Code Playgroud)

javascript svg ionic-framework

7
推荐指数
1
解决办法
3862
查看次数

Angular 2错开列表动画

我试图用动态列表在我的应用程序中错开动画.我想动画进入和离开,如果可能的话,但只会让你进入工作.

animations: [
    trigger('slideIn', [
        transition(':enter', [
            style({
                transform: 'translate3d(0,-10px,0)',
                opacity: 0
            }),
            animate('0.1s', style({
                transform: 'translate3d(0,0,0)',
                opacity: 1
            }))
        ])
    ])  
  ]
Run Code Online (Sandbox Code Playgroud)

上面是我无法运行的动画代码,下面是我如何将其实现到模板中.

<ion-content [@listAnimation]="eventsList?.length">
    <ion-list>
              <event-item *ngFor="let item of eventsList" [item]="item"></event-item>
    </ion-list>
     <empty-list [list]="eventsList" [message]="'There are no event items to display.'"></empty-list>
    <ion-infinite-scroll [enabled]="infiniteScroll === null" (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
     </ion-infinite-scroll>
</ion-content>
Run Code Online (Sandbox Code Playgroud)

请让我知道我哪里出错了.

animation angular

6
推荐指数
1
解决办法
588
查看次数

标签 统计

angular ×1

animation ×1

ionic-framework ×1

javascript ×1

svg ×1