Question

我正在使用Angular2。我有一个清单

FROM node:6.2.0

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install app dependencies
COPY package.json /usr/src/app/
RUN npm install

# Bundle app source
COPY . /usr/src/app
RUN chmod +x /usr/src/app/migrate.sh
RUN /usr/src/app/migrate.sh


EXPOSE 8080

CMD npm run build && npm start

我想每隔3秒钟一次显示一个li。而且，它将是无限循环。

这是我的阵列：

    <ul>
        <li *ngFor="let show of (ann)">
            {{show}}
        </li>
    </ul>

前3秒：显示ABC
接下来3秒：显示DEF，ABC将消失
接下来3秒：显示ZZZ和DEF将消失
接下来3秒：显示ABC，因为它是数组的结尾。这将是无限循环。

我该如何处理CSS？

Answer 1

我们可以用角度2的动画实现

检查预览https://plnkr.co/edit/fNZLspjrendI5SdK5gBC?p=preview

app.component.ts

@Component({
  selector: 'my-app',
  animations: [
    trigger('displayName', [
      state('in', style({ opacity: 1, transform: 'translateY(0)' })),
      state('out', style({ opacity: 0, display: "none", transform: 'translateY(100%)' })),
      transition('in => out', [
        style({ transform: 'translateY(0)', opacity: 1 }),
        animate('0.3s', style({ transform: 'translateY(100%)', opacity: 0 }))
      ]),
      transition('out => in', [
        style({ transform: 'translateY(100%)', opacity: 0 }),
        animate('0.3s 200ms', style({ transform: 'translateY(0)', opacity: 1 }))
      ])
    ])
  ]
})
export class App {
  name:string;
  currentIndex: number;

  students: [] = [
    {
      name: "Alan",
      animationState: 'in'
    },
    {
      name: "Jake",
      animationState: 'out'
    },
    {
      name: "Harry",
      animationState: 'out'
    },
    {
      name: "Susan",
      animationState: 'out'
    },
    {
      name: "Sarah",
      animationState: 'out'
    },
    {
      name: "Esther",
      animationState: 'out'
    }
  ];

  constructor() {
    this.name = 'Angular2';
    this.currentIndex = 0;
  }

  ngOnInit() {
    setInterval((function(){
      console.log(this.currentIndex);
      this.students[this.currentIndex].animationState = 'out';
      this.currentIndex++;
      if(this.currentIndex >= this.students.length) {
        this.currentIndex = 0;
      }
      this.students[this.currentIndex].animationState = 'in';
    }).bind(this), 3000);
  }
}

HTML

<div>
  <h2>Hello {{name}}</h2>
</div>
<div *ngFor="let student of students" [@displayName]="student.animationState">
    {{student.name}}
</div>

Answer 2

您可以使用Rxjs来实现这一点在模板中

    <div>
      <h2>Hello {{name}}</h2>
    </div>
<div *ngFor="let student of $students | async">
    {{student.name}}
</div>

和组件

 students: Array<any> = [
    {
      name: "Alan"
    },
    {
      name: "Jake"
    },
    {
      name: "Harry"
    },
    {
      name: "Susan"
    },
    {
      name: "Sarah"
    },
    {
      name: "Esther"
    }
];

  constructor() {
    this.name = 'Angular2'
    var timer = 0;
    this.$students = Observable.from([[], ...this.students])
    .mergeMap(x => Observable.timer(timer++ * 1000).map(y => x))
    .scan((acc, curr, seed) => {
      acc.push(curr);
      return acc;
    });
  }

https://plnkr.co/edit/MgJkFskZRp39FubSUbmH?p=preview

Answer 3

如果我更了解你，你就会寻找更像这样的东西：

＆＃13;

li {
  opacity: 0;
  animation: display 10s infinite;
}

li:nth-child(1) {
  animation-delay: 1s;
}
li:nth-child(2) {
  animation-delay: 3s;
}
li:nth-child(3) {
  animation-delay: 5s;
}
li:nth-child(4) {
  animation-delay: 7s;
}
li:nth-child(5) {
  animation-delay: 9s;
}

@keyframes display {
  0% {  opacity: 1  }
  20% { opacity: 0  }
}

＆＃13;

<ul class="num-1">
  <li>Jake</li>
  <li>Esther</li>
  <li>John</li>
  <li>Ann</li>
  <li>Someone</li>
</ul>

＆＃13;

或者这个：

＆＃13;

li {
  opacity: 0;
  animation: display 10s infinite;
}

li:nth-child(1) {
  animation-delay: 1s;
}
li:nth-child(2) {
  animation-delay: 3s;
}
li:nth-child(3) {
  animation-delay: 5s;
}
li:nth-child(4) {
  animation-delay: 7s;
}
li:nth-child(5) {
  animation-delay: 9s;
}

@keyframes display {
  20% {  opacity: 1  }
  30% { opacity: 0  }
}

＆＃13;

<ul class="num-1">
  <li>Jake</li>
  <li>Esther</li>
  <li>John</li>
  <li>Ann</li>
  <li>Someone</li>
</ul>

＆＃13;

CSS一次显示一个li

3 个答案: