如何禁用 getmdl 切换的涟漪效应？答案

【问题标题】：How to disable ripple effect on getmdl's toggle?如何禁用 getmdl 切换的涟漪效应？
【发布时间】：2017-08-09 23:10:06
【问题描述】：

我正在使用getmdl.io 组件库，但我找不到在切换组件上禁用波纹效果的方法。

我的 HTML 代码如下所示：

<label class="mdl-switch mdl-js-switch" for="switch-1" id='switch-main'>
        <input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
        <span class="mdl-switch__label"></span>
</label>

【问题讨论】：

标签： javascript css togglebutton material-design-lite

【解决方案1】：

尝试将此 css 添加到您的代码中：

//for checkoox:
.mdl-ripple{
    visibility: hidden !important;
}
//for switch
.mdl-switch__input{
    visibility: hidden !important;
}

似乎该库将“span.mdl-ripple”标签注入您的 span.mdl-switch__label 以达到效果。我们可以设置它的可见性来隐藏它而不影响布局。

【讨论】：

这不起作用，see JsFiddle Demo
似乎你没有将“getmdl.io”导入你的jsfiddle。
好吧，我现在做了，不知何故它已被删除，但我无法通过添加您的 css 看到差异。 see JsFiddle Demo 2
您的演示中似乎没有连锁反应。也许我没明白你的意思是什么连锁反应。
“波纹”是指单击时的短径向动画。就像一个圆圈，点击时会显示几分之一秒。