如何在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-no-ink添加到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

我生成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;
}

Answer 3

这个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;
}