【问题标题】: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;
      }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2016-07-06
        • 2017-02-15
        • 2017-06-05
        • 1970-01-01
        • 2015-09-30
        • 2021-06-27
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多