Angular2组件与指令的小实践——实现一个图片轮播组件

一、创建组件

selector: 'my-slide-img' templateUrl: 'slide-img.component.html' styleUrls: ['slide-img.component.css' trigger('imgMove' state('off',style({'display': 'none','z-index': '0','transform': 'translateX(0)' state('prev',style({'z-index': '1' 'transform': 'translateX(-100%)' state('next',style({'z-index': '2','transform': 'translateX(100%)' state('on',style({'z-index': '3', transition('prev=>on' animate('0.3s ease-in' transition('next=>on' animate('0.3s ease-in' transition('on=>prev' animate('0.3s ease-in' transition('on=>next' animate('0.3s ease-in' export class SlideImgComponent { }