如何在angularjs中禁用md-sidenav的动画答案

【问题标题】：How to disable animation for md-sidenav in angularjs如何在angularjs中禁用md-sidenav的动画
【发布时间】：2015-08-05 19:24:50
【问题描述】：

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

问题：是否可以禁用 md-sidenav 打开和关闭时的动画？默认情况下，它的打开和关闭似乎是动画的。

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

【问题讨论】：

标签： angularjs animation material-design

【解决方案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

【讨论】：

我是否需要像您在答案中显示的那样添加这个带有星号的属性？
抱歉，我尝试在代码示例中添加粗体样式。这是编辑器的格式错误。不需要星号:)
我尝试了 css 和属性，但菜单仍然是动画的。我正在尝试检测某些浏览器并为无法处理的浏览器禁用动画...例如 IE 和 Safari
更新：我更新到 Angular 1.4.4 和最新的 Angular-Material 大师，现在禁用效果工作。

【解决方案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;
}

【讨论】：

【解决方案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;
}

【讨论】：