如何在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>

- Sunil

Answer 1

尝试给侧边栏添加属性md-no-ink。

<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

这篇文章主要介绍了如何在AngularJS Material中使用自定义图标。首先，需要将自定义图标文件添加到项目中，并在CSS文件中设置其样式。然后，在HTML代码中引用该图标即可。需要注意的是，如果要在按钮等元素中使用该图标，还需要为该元素设置相应的class。

- Diego Lins de Freitas

---

我需要像你在答案中展示的那样添加带星号的属性吗？ - Sunil

抱歉，我试图为代码示例添加加粗样式。这是编辑器的格式错误，不需要使用星号 :) - Diego Lins de Freitas

我尝试了CSS和属性，但菜单仍然有动画效果。我正在尝试检测某些浏览器，并禁用不能处理它的浏览器的动画效果...比如IE和Safari。 - Spock

更新：我已经升级到Angular 1.4.4和最新的Angular-Material主版本，现在禁用效果可以正常工作。 - Spock

Answer 2

I generate a disable-animations.css with next:

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

我将此文件包含在所有文件的末尾。

如果您需要禁用特定控件，请使用：

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

- Eduardo Cuomo

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

- David