Material Design Lite (MDL) 是一个用于创建 Material Design 风格网站的前端框架。MDL 提供了一系列简单易用的组件和工具，可以让您快速构建漂亮的网站。同时，MDL 还内置了许多动画效果，可以让您的网站更加生动有趣。
本篇文章将介绍如何使用 MDL 实现一些有趣的动画效果，包括悬浮按钮的点击效果、输入框的聚焦效果、选项卡的切换效果等等。
悬浮按钮的点击效果
悬浮按钮是 Material Design 风格网站中常见的元素，我们可以使用 MDL 来实现一个悬浮按钮的点击效果。
首先，在页面中添加一个按钮：
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"> <i class="material-icons">add</i> </button>
接下来，我们需要初始化 MDL 的 JavaScript 代码，并设置按钮的点击事件：
-- -------------------- ---- ------- -- --- --- ---------------------------------------- -- ---- --- ------ - -------------------------------------- -- ------ -------------------------------- ---------- - -- ----------- ---展开代码
当按钮被点击时，我们可以使用 MDL 的 MaterialRipple 组件来实现一个波纹效果：
// 获取按钮 var button = document.querySelector('.mdl-button'); // 设置点击事件 button.addEventListener('click', function() { // 创建波纹效果 var ripple = new MaterialRipple(this); });
现在，我们已经实现了一个简单的悬浮按钮点击效果。
输入框的聚焦效果
输入框是网站中常见的元素，我们可以使用 MDL 来实现一个输入框的聚焦效果。
首先，在页面中添加一个输入框：
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="input"> <label class="mdl-textfield__label" for="input">Email</label> </div>
接下来，我们需要初始化 MDL 的 JavaScript 代码，并设置输入框的聚焦事件：
-- -------------------- ---- ------- -- --- --- ---------------------------------------- -- ----- --- ----- - ------------------------------------------------ -- ------ ------------------------------- ---------- - -- ------------ ---展开代码
当输入框被聚焦时，我们可以使用 MDL 的 MaterialAnimation 组件来实现一个漂浮效果：
// 获取输入框 var input = document.querySelector('.mdl-textfield__input'); // 设置聚焦事件 input.addEventListener('focus', function() { // 创建漂浮效果 var animation = new MaterialAnimation(this.parentNode); });
现在，我们已经实现了一个简单的输入框聚焦效果。
选项卡的切换效果
选项卡是 Material Design 风格网站中常见的元素，我们可以使用 MDL 来实现一个选项卡的切换效果。
首先，在页面中添加两个选项卡：
-- -------------------- ---- ------- ---- --------------- ------------- ---- -------------------------- -- ------------ -------------------- -------------- ----- -- ------------ ------------------------- ----- ------ ---- ---------------------- ---------- ---------- ------ - ----------- ------ ---- ----------------------- ---------- ------ - ----------- ------ ------展开代码
接下来，我们需要初始化 MDL 的 JavaScript 代码，并设置选项卡的切换事件：
-- -------------------- ---- ------- -- --- --- ---------------------------------------- -- ----- --- ---- - ------------------------------------ -- ------ ------------------------------ ----------- - -- ---------- --- --- - ----------------------------------- -- ------ ------- -- ----- --- ----- - ------------------------------------------------- -- -------- ------- -- ------ --- --------- - --------------------------------- -- ----------- ---------------------------------------- --- ----------- - ------------------------------------------------- -- ------------- ------------------------------------------ ------------------------------- --------------------------------- ---展开代码
现在，我们已经实现了一个简单的选项卡切换效果。
通过上面三个示例，我们可以看到 MDL 内置了许多有趣的动画效果，可以让我们的网站更加生动有趣。同时，MDL 的组件和工具也非常简单易用，非常适合初学者学习和使用。希望这篇文章可以对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b9ad7d306f20b3a6820d37
