{"action":"created","issue":{"url":"https://api.github.com/repos/NG-ZORRO/ng-zorro-antd-mobile/issues/59","repository_url":"https://api.github.com/repos/NG-ZORRO/ng-zorro-antd-mobile","labels_url":"https://api.github.com/repos/NG-ZORRO/ng-zorro-antd-mobile/issues/59/labels{/name}","comments_url":"https://api.github.com/repos/NG-ZORRO/ng-zorro-antd-mobile/issues/59/comments","events_url":"https://api.github.com/repos/NG-ZORRO/ng-zorro-antd-mobile/issues/59/events","html_url":"https://github.com/NG-ZORRO/ng-zorro-antd-mobile/issues/59","id":371069295,"node_id":"MDU6SXNzdWUzNzEwNjkyOTU=","number":59,"title":"跑马灯在横向滑动时，初始化宽度存在问题","user":{"login":"nuonuoge","id":16378798,"node_id":"MDQ6VXNlcjE2Mzc4Nzk4","avatar_url":"https://avatars0.githubusercontent.com/u/16378798?v=4","gravatar_id":"","url":"https://api.github.com/users/nuonuoge","html_url":"https://github.com/nuonuoge","followers_url":"https://api.github.com/users/nuonuoge/followers","following_url":"https://api.github.com/users/nuonuoge/following{/other_user}","gists_url":"https://api.github.com/users/nuonuoge/gists{/gist_id}","starred_url":"https://api.github.com/users/nuonuoge/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nuonuoge/subscriptions","organizations_url":"https://api.github.com/users/nuonuoge/orgs","repos_url":"https://api.github.com/users/nuonuoge/repos","events_url":"https://api.github.com/users/nuonuoge/events{/privacy}","received_events_url":"https://api.github.com/users/nuonuoge/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"BronzeCui","id":18499411,"node_id":"MDQ6VXNlcjE4NDk5NDEx","avatar_url":"https://avatars2.githubusercontent.com/u/18499411?v=4","gravatar_id":"","url":"https://api.github.com/users/BronzeCui","html_url":"https://github.com/BronzeCui","followers_url":"https://api.github.com/users/BronzeCui/followers","following_url":"https://api.github.com/users/BronzeCui/following{/other_user}","gists_url":"https://api.github.com/users/BronzeCui/gists{/gist_id}","starred_url":"https://api.github.com/users/BronzeCui/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/BronzeCui/subscriptions","organizations_url":"https://api.github.com/users/BronzeCui/orgs","repos_url":"https://api.github.com/users/BronzeCui/repos","events_url":"https://api.github.com/users/BronzeCui/events{/privacy}","received_events_url":"https://api.github.com/users/BronzeCui/received_events","type":"User","site_admin":false},"assignees":[{"login":"BronzeCui","id":18499411,"node_id":"MDQ6VXNlcjE4NDk5NDEx","avatar_url":"https://avatars2.githubusercontent.com/u/18499411?v=4","gravatar_id":"","url":"https://api.github.com/users/BronzeCui","html_url":"https://github.com/BronzeCui","followers_url":"https://api.github.com/users/BronzeCui/followers","following_url":"https://api.github.com/users/BronzeCui/following{/other_user}","gists_url":"https://api.github.com/users/BronzeCui/gists{/gist_id}","starred_url":"https://api.github.com/users/BronzeCui/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/BronzeCui/subscriptions","organizations_url":"https://api.github.com/users/BronzeCui/orgs","repos_url":"https://api.github.com/users/BronzeCui/repos","events_url":"https://api.github.com/users/BronzeCui/events{/privacy}","received_events_url":"https://api.github.com/users/BronzeCui/received_events","type":"User","site_admin":false}],"milestone":null,"comments":3,"created_at":"2018-10-17T13:16:42Z","updated_at":"2018-10-23T02:18:07Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"**Version**\r\n0.9.5\r\n**Environment**\r\nwin10\r\n**Reproduction link**\r\nhttps://pktsbn.run.stackblitz.io/\r\nSteps to reproduce\r\nhttps://pktsbn.run.stackblitz.io/\r\nWhat is expected?\r\nCarouselSlide高度正常\r\nWhat is actually happening?\r\nCarouselSlide在父元素没有ng动画时，宽度为0\r\nOther\r\n![1](https://user-images.githubusercontent.com/16378798/47087875-b5d9cf80-d24f-11e8-907e-0e080864439c.png)\r\n\r\n纵向滑动时，宽度是auto未出现问题\r\n```\r\ncarouselInit函数中\r\nv.width = this.vertical ? 'auto' : this._rationWidth - this.cellSpacing; \r\n```\r\n横向滑动时，当父组件有ng的动画时，在afterviewinit后会自动插入class:'ng-star-inserted'，dom发生了变化，会调用afterviewInit里面的callback函数，_rationWidth就有数值了，但是在父组件没有ng的动画，BrowserAnimationsModule不会给CarouselSlide增加class:ng-star-inserted，也就无法触发callback，然后this._rationWidth数值一直是0，v.width就是0了\r\n![2018-10-17_210943](https://user-images.githubusercontent.com/16378798/47088441-1cabb880-d251-11e8-9f33-b55a32694236.png)\r\n\r\n```\r\ncarouselInit(items) {\r\n    this.infinite = this.infinite === undefined ? true : this.infinite;\r\n    this._nodeArr = items['_results'];\r\n    this.dragging = this._nodeArr.length > 1 && this.dragging ? this.dragging : false;\r\n    this.dragging = this.dragging ? this.dragging : false;\r\n    if (this._nodeArr.length > 1) {\r\n      this._lastIndex = this._nodeArr.length - 1;\r\n      setTimeout(() => {\r\n        this._nodeArr.forEach((v, index) => {\r\n          v.width = this.vertical ? 'auto' : this._rationWidth - this.cellSpacing; \r\n          v.left = this.vertical ? 0 : index === this._lastIndex ? -this._rationWidth : index * this._rationWidth;\r\n          v.top = this.vertical ? (index === this._lastIndex ? -this._rationWidth : index * this._rationWidth) : 0;\r\n          v.margin = this.vertical ? `${this.cellSpacing / 2}px auto` : `auto ${this.cellSpacing / 2}px`;\r\n        });\r\n        this.startTimer();\r\n      }, 0);\r\n    } else if (this._nodeArr.length === 1) {\r\n      setTimeout(() => {\r\n        this._nodeArr.forEach((v, index) => {\r\n          v.width = this._rationWidth - this.cellSpacing;\r\n          v.left = 0;\r\n          v.top = 0;\r\n          v.margin = `auto ${this.cellSpacing / 2}px`;\r\n        });\r\n      }, 0);\r\n    }\r\n  }\r\n```\r\n方案：\r\n给carousel的component装饰器加上动画好使，不过这个ng-star-inserted是ng5出现的，未来不知道会不会去掉，有一点风险\r\n```\r\nanimations: [\r\n    trigger('', []) // 利用动画增加的css类ng-star-inserted首次触发MutationObserver\r\n  ]\r\n```\r\n或者在afterviewinit里给_rationWidth等变量做callback中那样的赋值"},"comment":{"url":"https://api.github.com/repos/NG-ZORRO/ng-zorro-antd-mobile/issues/comments/432061975","html_url":"https://github.com/NG-ZORRO/ng-zorro-antd-mobile/issues/59#issuecomment-432061975","issue_url":"https://api.github.com/repos/NG-ZORRO/ng-zorro-antd-mobile/issues/59","id":432061975,"node_id":"MDEyOklzc3VlQ29tbWVudDQzMjA2MTk3NQ==","user":{"login":"nuonuoge","id":16378798,"node_id":"MDQ6VXNlcjE2Mzc4Nzk4","avatar_url":"https://avatars0.githubusercontent.com/u/16378798?v=4","gravatar_id":"","url":"https://api.github.com/users/nuonuoge","html_url":"https://github.com/nuonuoge","followers_url":"https://api.github.com/users/nuonuoge/followers","following_url":"https://api.github.com/users/nuonuoge/following{/other_user}","gists_url":"https://api.github.com/users/nuonuoge/gists{/gist_id}","starred_url":"https://api.github.com/users/nuonuoge/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nuonuoge/subscriptions","organizations_url":"https://api.github.com/users/nuonuoge/orgs","repos_url":"https://api.github.com/users/nuonuoge/repos","events_url":"https://api.github.com/users/nuonuoge/events{/privacy}","received_events_url":"https://api.github.com/users/nuonuoge/received_events","type":"User","site_admin":false},"created_at":"2018-10-23T02:18:07Z","updated_at":"2018-10-23T02:18:07Z","author_association":"CONTRIBUTOR","body":"已修复：https://github.com/NG-ZORRO/ng-zorro-antd-mobile/pull/67"}}
{"actor":{"display_login":"nuonuoge"}}