如何在angularjs中禁用md-sidenav的動畫

Question

我在angularjs中使用Material Design中的md-sidenav。

問題：是否可以在打開和關閉時禁用md-sidenav的動畫？看起來它的開幕和結束都是默認動畫。

<md-sidenav md-component-id="left" class="md-sidenav-left"> 
Left Nav! 
</md-sidenav> 

Answer 1

嘗試MD-沒有墨添加屬性到sidevav

<md-sidenav md-no-ink md-component-id="left" class="md-sidenav-left"> 
Left Nav! 
</md-sidenav> 

或刪除所有動畫重寫CSS：

.md-ripple-container, .md-ripple-placed { 
    transition: none; 
} 

參考：https://groups.google.com/d/topic/ngmaterial/HJ01ZHEbOQA/discussion

Answer 2

這個CSS爲我工作。我瀏覽了AngularMaterial CSS文件並刪除了所有對動畫的引用。 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; 
} 

Answer 3

我生成一個旁邊disable-animations.css：

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

我包括在所有的結束這個文件。

如果你需要禁用特定的控制，使用方法：

disable-animation, 
disable-animation *, 
.disable-animation, 
.disable-animation * { 
    -webkit-transition: none !important; 
    transition: none !important; 
}