スワイプアニメーションが遅れている - ここでは、イオン/ CSS

Question

は何が起こっているかである。

私は前にこの問題を抱えている、それが正常に答えた：

Ionic rendering issue during swipe on iOS

しかし、このページ非常にわずかに異なって作られています...そして、上記の私の質問で正しく示唆されているように、ヘッダ内にあるすべてのposition: absoluteを取り除いた後でさえ（まだ遅れているCSSがあります）、それはまだ遅れています。これが起こる他の理由が他にありますか？

ここ

が私のコードです：

ヘッダーHTML

<ion-header> <!--[@slideDown]="downState"--> 
    <div (swiperight)="swipeRight()" (swipeleft)="swipeLeft()"> 
    <ion-toolbar #clickme class="itemadspace" [@slideDown]="downState" no-padding> <!--[@slideDown]="downState"--> 
     <!--<ion-item class="ad" no-padding no-lines>--> 
     <div class="stylistview"> 
     <button class="stylistviewbutton" (tap)='switchView()' ion-button color="secondary">User View</button> 
     </div> 

     <swiper #swiper [config]="config" [(index)]="swiperIndex" (indexChange)="indexChange()"> 
     <div *ngFor="let ad of ads; let i = index" class="adcontainer"> 
      <img src="{{ad}}" class="adimage" #adimage> 
     </div> 
     </swiper> 
    </ion-toolbar> 

    <!--</ion-item>--> 
    <div class='pluscontainer' [@plusSlide]="downState"> 
     <p>BUY</p><br><p>AD</p> 
    </div> 

    <div class="clickme" (tap)="toolClicked($event)"> 
     <ion-navbar color="black" [@toolSlide]="toolbarState" id="iontoolbar"> <!--[@toolSlide]="toolbarState"--> 
     <ion-icon class='custom-icon' name="play"></ion-icon> 
     <button class="all toolbarstyle" #allF ion-button color="black" (tap)="all()">All</button> 
     <button class="classes toolbarstyle" #classesFeed ion-button color="black" (tap)="classes()">Classes</button> 
     <button class="products toolbarstyle" #productsFeed ion-button color="black" (tap)="products()">Products</button> 
     <button class="formulas toolbarstyle" #formulasFeed ion-button color="black" (tap)="formulasList()">Formulas</button> 
     </ion-navbar> 
    </div> 
    </div> 
</ion-header> 

関連CSS

.itemadspace { 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: black; 
    text-align: center; 
} 

.stylistviewbutton {  
    font-size: 12px; 
} 

.stylistview { 
    text-align: right; 
    position: absolute; 
    top: 0px; 
    right: 24%; 
    z-index: 5; 
    width:5%; 
} 

.adcontainer { 
    width: 100%; 
    height: 100%; 
} 

.adimage { 
    width: auto; 
} 

.pluscontainer { 
    position: fixed; 
    z-index: 2; 
    right: 0px; 
    top: 60px; 
    background-color: rgba(0,0,0,0.7); 
    color: map-get($colors, primary); 
    text-align: center; 
    padding: 4px; 
} 

#iontoolbar { 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: black; 
    color: white; 
    border-bottom-style: solid; 
    border-bottom-color: map-get($colors, primary); 
    border-bottom-width: 4px; 
} 

.custom-icon { 
    color : gray; 
    font-size: 28px; 
    margin-left: 10px; 
    vertical-align: middle; 
    margin-top: 8px; 
} 

.all { 
    margin-left: 10px; 
} 

.toolbarstyle { 
    font-size: 12px; 
    padding: 0 0.5em; 
    color: gray; 
    background-color: black; 
} 

.toolbarstyle:focus { 
    color: map-get($colors, primary); 
} 

ion-toolbar { 
    div.toolbar-background { 
     //background-image: url('../img/tresemme.png') !important; 
    //background-repeat: no-repeat; 
     //background-size: cover; 
     background-color: #000000; 
    } 
} 

swiper.s-wrapper>.swiper .swiper-wrapper .swiper-slide, swiper.s-wrapper>.swiper .swiper-wrapper .swiper-slide-content { 
    overflow: auto; 
    max-height: 100%; 
    max-width: 77%; 
} 

.swiper-wrapper { 
    height: 300px; 
} 

私もヘッダで使用されますされこれを見つけた...そしてそれposition: absoluteがあります - これはすべてを台無しにすることができますか？私はposition: absolutes/fixedせずに試してみました

ion-header { 
    @include position(0, null, null, 0); 

    position: absolute; 
    z-index: $z-index-toolbar; 
    display: block; 

    width: 100%; 
} 

は、私はposition: relativeといくつかの置き換え - それは助けにはなりませんでした。どんな助けでも大変感謝しています。

Answer 1

ionic-WKWebviewをインストールし、アニメーションが正常に動作することを確認してください。あなたはhereからイオンwkwebviewを得ることができます。上記のプラグインを使用すると、ほとんどのUIの問題が解決される可能性があります。

更新：あなたのコメントから、あなたは

アニメーションは、ページの変更をアニメーション化する のナビゲーションコントローラにオプションを渡すときに使用されるだけでアニメーションです...ラグがちょうどであることを述べました ページスワイプ流動的

その方法を使用していない場合は、からNavControllerてアニメーション化されているかはい、そしてあなたの質問にあなたが言及しなかったが、これはアニメーションを設定する別の方法です

var navOptions = { 
     animation: 'ios-transition' 
}; 
this.navController.push(yourpagename, null, navOptions);