离子2

时间:2017-07-30 16:08:48

标签: javascript angular animation ionic-framework ionic2

我用离子2 ANgular 2和打字稿制作一个ap,我需要在其中使用动画。 问题是动画持续时间不起作用,因此动画是即时的。

动画代码

animations: [
    trigger('slideInOut', [
      state('in', style({
        transform: 'translate3d(0, 0, 0)',
        "transition-duration": "300ms"
      })),
      state('out', style({
        transform: 'translate3d(100%, 0, 0)',
        "transition-duration": "300ms"
      })),
      transition('in => out', animate('800ms ease')),
      transition('out => in', animate('800ms ease'))
    ]),
  ]

注意:我添加了transition-duration属性以强制动画持续时间并且它有效。因此,动画持续时间为300毫秒,而不是动画方法中规定的800毫秒。

问题在于我知道它应该在没有添加transition-duration的情况下工作但在我的情况下它没有,所以问题是什么?

HTML代码

<ion-list *ngFor="let Position of Positions"  [@slideInOut]="Position.out">
    <ion-item>
      <ion-avatar item-start>
        <img>
      </ion-avatar>
      <h2> {{Position.Name}}</h2>
      <button ion-button icon-only item-end clear large>
        <ion-icon name="checkbox" color="{{Position.voted==true?'secondary':'danger'}}" ></ion-icon>
      </button>
    ............

out属性最初设置为"in",然后更改为"out"

1 个答案:

答案 0 :(得分:2)

1)您是否将# For Subtraction if operations == 2: s = 0 diff = 0 while s < x: number = int(input("Please enter number here: ")) s += 1 if (s==1): diff=number else: diff = calculator.subtraction(diff, number) print("The answer is", diff) #For Division if operations == 4: d = 0 quo = 1 while d < x: number = int(input("Please enter number here: ")) d += 1 if (d==1): quo=number else: quo = calculator.division(quo,number) print("The answer is", quo) 定义为&#39; import&#39;在你的app-module.ts中?

2)您使用的是Safari / iOS吗?您可能需要web-amimations.js polyfill?

还有一个有用的帖子here