使用角度动画在离子中添加过渡效果[关闭]答案

【问题标题】：add transition effect in ionic using angular animate [closed]使用角度动画在离子中添加过渡效果[关闭]
【发布时间】：2018-02-14 19:07:53
【问题描述】：

我是 ionic 平台的新手。我想添加一些动画，比如下拉列表，但它不需要过渡。有什么建议吗？提前致谢。

【问题讨论】：

标签： html css angular ionic-framework

【解决方案1】：

你可以借助下面的代码sn-p在ionic 2/ionic 3中添加过渡效果。这是一个滑动过渡效果的例子。

import {Component, trigger, state, style, transition, animate} from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('slideInOut', [
      state('in', style({
        transform: 'translate3d(0, 0, 0)'
      })),
      state('out', style({
        transform: 'translate3d(100%, 0, 0)'
      })),
      transition('in => out', animate('400ms ease-in-out')),
      transition('out => in', animate('400ms ease-in-out'))
    ]),
  ]
})
export class AppComponent {
  title = 'app works!';

  toggleMenu() {

  }
}

参考 - https://blog.thecodecampus.de/angular-2-animate-creating-sliding-side-navigation/

【讨论】：