Question

我通过滚动事件为div设置动画。现在在移动设备上的性能不是很好，并且文本会闪烁。我正在使用离子型。以全屏模式浏览chrome时，我没有任何问题。

有什么想法会导致这种情况，我应该研究哪个方向？

HTML：

onAuthStateChanged

CSS

firebase.initializeApp({
    apiKey: 'AIzaSyCFYWd6FpR53u4hSPXQSjOYeZNPF1FxG2M',
    authDomain: 'yt-devmeetup.firebaseapp.com',
    databaseURL: 'https://yt-devmeetup.firebaseio.com',
    projectId: 'yt-devmeetup',
    storageBucket: 'gs://yt-devmeetup.appspot.com'
})
firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        store.dispatch('autoSignIn', user)
        store.dispatch('fetchUserData')
    }
    new Vue({
        el: '#app',
        router,
        store,
        render: h => h(App),
        created() {
            this.$store.dispatch('loadMeetups')
        }
    })
})

滚动

<ion-scroll no-padding class="time-table" id="scroll" #scroll scrollX="true" scrollY="false">
        <div class="line" [ngStyle]="{'left': leftTime + 30 +  'px', 'min-height': '90vh'}"></div>
        <div class="locations" *ngFor="let locations of dayselect; index as i">
          <ion-row class="location">
            <div class="gig">
              <div class="gig-box" *ngFor="let d of locations?.eventSchedules; index as j" (click)="eventDetail(d.event.id)" [ngStyle]="{'width': d.duration * minute + 'px', 'left': (d.minutesFromStart * minute) + 30 + 'px'}">
                <img [src]="d.event.imagePath" alt="">
                <h4>{{d.event.name }}</h4>
                <p>{{cut3(d.startTime) + '-' + cut3(d.endTime)}}</p>
                <ion-icon name="heart" class="fav"></ion-icon>
              </div>
            </div>
          </ion-row>
          <div id='tr-footer'></div>
        </div>
        <div *ngFor="let locations of dayselect; index as i" class="s{{i + 1}} no-flickr" [style.transform]="'translateX('+textscroll +')'">
          <h5 class="no-flickr">{{locations.name}}</h5>
        </div>
      </ion-scroll>

在手机上滚动时文字闪烁

0 个答案: