Làm thế nào để cải thiện hiệu ứng góc hoạt hình hiệu ứng hoạt hình sidenav

Question

Tôi đã thực hiện một sidenav sử dụng md-sidenav của vật liệu góc và bên dưới là ảnh chụp màn hình của nó. Khi tôi thử bấm vào nút cho sidenav các hình ảnh động khá chậm. Tôi đã sử dụng trên một hình ảnh trên thanh hàng đầu và phần còn lại chỉ văn bản với các biểu tượng phông chữ tuyệt vời. Những gì tôi có thể có thể làm xấu mà nó là chậm. Các hình ảnh động thậm chí còn tồi tệ hơn khi tôi xem nó trên thiết bị di động.

Ảnh chụp màn hình của sidenav:

Đây là mã của sidenav:

<md-sidenav class="boxme-sidenav" layout="column" hide-gt-sm class="md-sidenav-left md-whiteframe-z2" md-component-id="left"> 
    <div layout="coloumn" style="z-index:1000;box-shadow:2px 0px 10px grey;"> 
     <div flex class="sidenav-logo"> 
      <img ng-src="{{mainLogo}}" alt=""> 
     </div> 
    </div> 
    <md-list style="background-color:#00B0FF;color:white;z-index:10;"> 
     <md-list-item class="md-2-line sidenav-list" layout-padding> 
      <md-button href="" layout-align="space-around center"> 
      <i class="fa fa-size fa-briefcase"></i> 
       <span class="md-body-2">Dashboard</span> 
      </md-button> 
     </md-list-item> 
     <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center"> 
      <md-button href=""> 
       <i class="fa fa-size fa-user"></i> 
       <span>My Stuff</span> 
      </md-button> 
     </md-list-item> 
     <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center"> 
      <md-button href=""> 
       <i class="fa fa-size fa-file-o"></i> 
       <span>Order History</span> 
      </md-button> 
     </md-list-item> 
     <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center"> 
      <md-button href=""> 
       <i class="fa fa-size fa-credit-card"></i> 
       <span>Billing</span> 
      </md-button> 
     </md-list-item> 
     <md-divider></md-divider> 
     <md-subheader style="background-color:#00B0FF;color:white;">Manage the items</md-subheader><!--You can use md-no-sticky class--> 
     <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center"> 
      <md-button href=""><i class="fa fa-size fa-user"></i> Pickup my stuff</md-button> 
     </md-list-item> 
     <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center"> 
      <md-button href=""><i class="fa fa-size fa-user"></i> Deliver my stuff</md-button> 
     </md-list-item> 
    </md-list> 
</md-sidenav> 

Lưu ý:

Sau một thời gian thực hiện và hình ảnh động của sidenav được thực tụt trên Trang web.

Answer 1

Nó có thể không được giải pháp phù hợp cho trường hợp của bạn, nhưng vô hiệu hóa nền và thêm 1 tinh chỉnh làm hiệu suất chuyển thể chấp nhận được đối với tôi (ngay cả trên điện thoại)

.md-sidenav-backdrop { 
    opacity: 0 !important; 
} 

md-sidenav.md-closed-add, 
md-sidenav.md-closed-remove { 
    -webkit-transition: all .4s cubic-bezier(0.25, .8, .25, 1) !important; 
    transition: all .4s cubic-bezier(0.25, .8, .25, 1) !important; 
} 

Answer 2

tôi quyết định chỉ cần loại bỏ các hình ảnh động như sau:

Tôi đã xem qua tệp CSS AngularMaterial và xóa tất cả các tham chiếu đến hoạt ảnh. KA-BOOM!

/** 
* fix md-sidenav lag by removing animation 
**/ 

.md-sidenav-backdrop { 
    opacity: 0 !important; 
} 

md-sidenav.md-closed-add, 
md-sidenav.md-closed-remove, 
md-sidenav.md-closed-add.md-closed-add-active, 
md-sidenav.md-closed-remove.md-closed-remove-active, 
md-sidenav.md-locked-open-remove-active, 
md-sidenav.md-closed.md-locked-open-add-active 

{ 
    -webkit-transition: none !important; 
    transition: none !important; 
} 

---- chỉnh sửa ----

Cũng cập nhật lên phiên bản mới nhất của AngularMaterial có vẻ là một sự cải tiến tổng thể trong v1.0.0-rc4 so với phiên bản trước.