在 Material Design 中添加更多的动态效果-FunTeaLearn Online Web Tutorials

Material Design 是 Google 推出的一种设计语言，旨在为移动设备和 Web 应用程序提供一致的视觉和交互体验。它强调简洁、明确和有意义的设计，同时提供了许多动态效果，使用户能够更加自然地与应用程序交互。

在本文中，我们将介绍如何在 Material Design 中添加更多的动态效果，以增强用户体验。

使用 CSS 动画

CSS 动画是一种使用 CSS 属性来创建动态效果的技术。在 Material Design 中，可以使用 CSS 动画来实现许多动态效果，如按钮的涟漪效果、卡片的翻转效果等等。

按钮的涟漪效果

在 Material Design 中，按钮的涟漪效果是一种非常常见的动态效果。可以使用 CSS 动画来实现这种效果。

<button class="btn">
  Click me
</button>

// www.javascriptcn.com code example
.btn {
  background-color: #2196f3;
  border: none;
  color: #fff;
  padding: 12px 24px;
  font-size: 16px;
  position: relative;
  overflow: hidden;
}

.btn:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 100%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.btn:hover:after {
  width: 200%;
  height: 200%;
}

在上面的示例中，我们为按钮添加了一个伪元素 :after，并将其定位在按钮的中心。当用户悬停在按钮上时，我们使用 CSS 过渡将伪元素的宽度和高度从 0 扩展到 200%。

卡片的翻转效果

在 Material Design 中，卡片的翻转效果是一种非常酷的动态效果。可以使用 CSS 动画来实现这种效果。

<div class="card">
  <div class="front">
    Front content
  </div>
  <div class="back">
    Back content
  </div>
</div>

// www.javascriptcn.com code example
.card {
  position: relative;
  height: 200px;
  width: 300px;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.card:hover {
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}

.front {
  background-color: #fff;
}

.back {
  background-color: #2196f3;
  transform: rotateY(180deg);
}

在上面的示例中，我们创建了一个包含两个 div 元素的卡片。当用户悬停在卡片上时，我们使用 CSS 过渡将卡片沿着 Y 轴旋转 180 度，从而显示卡片的背面。

使用 JavaScript 动画

JavaScript 动画是一种使用 JavaScript 代码来创建动态效果的技术。在 Material Design 中，可以使用 JavaScript 动画来实现更加复杂的动态效果，如浮动操作按钮的展开效果、列表项的滑动删除效果等等。

浮动操作按钮的展开效果

在 Material Design 中，浮动操作按钮是一种常见的控件，它可以用来触发特定的操作。可以使用 JavaScript 动画来实现浮动操作按钮的展开效果。

// www.javascriptcn.com code example
<div class="fab">
  <button class="toggle">
    <i class="material-icons">add</i>
  </button>
  <ul class="actions">
    <li><button><i class="material-icons">edit</i></button></li>
    <li><button><i class="material-icons">delete</i></button></li>
    <li><button><i class="material-icons">share</i></button></li>
  </ul>
</div>

// www.javascriptcn.com code example
.fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
}

.toggle {
  background-color: #2196f3;
  border: none;
  color: #fff;
  padding: 12px;
  font-size: 24px;
  border-radius: 50%;
  cursor: pointer;
}

.actions {
  position: absolute;
  bottom: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  transform: translate(100%, 0);
  transition: transform 0.3s ease;
}

.actions.show {
  transform: translate(0, 0);
}

.actions li {
  display: inline-block;
  margin: 8px;
}

.actions button {
  background-color: #fff;
  border: none;
  color: #2196f3;
  padding: 12px;
  font-size: 24px;
  border-radius: 50%;
  cursor: pointer;
}

var toggle = document.querySelector('.toggle');
var actions = document.querySelector('.actions');

toggle.addEventListener('click', function() {
  actions.classList.toggle('show');
});

在上面的示例中，我们创建了一个包含浮动操作按钮和一组操作的 div 元素。当用户单击浮动操作按钮时，我们使用 JavaScript 代码将操作展开，并使用 CSS 过渡将其从右侧滑入。

列表项的滑动删除效果

在 Material Design 中，列表是一种常见的控件，用于显示一组相关的数据。可以使用 JavaScript 动画来实现列表项的滑动删除效果。

// www.javascriptcn.com code example
<ul class="list">
  <li class="item">
    Item 1
    <button class="delete">Delete</button>
  </li>
  <li class="item">
    Item 2
    <button class="delete">Delete</button>
  </li>
  <li class="item">
    Item 3
    <button class="delete">Delete</button>
  </li>
</ul>

// www.javascriptcn.com code example
.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid #ccc;
}

.delete {
  background-color: #f44336;
  border: none;
  color: #fff;
  padding: 8px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.delete:hover {
  transform: translateX(-8px);
}

// www.javascriptcn.com code example
var deleteButtons = document.querySelectorAll('.delete');

deleteButtons.forEach(function(button) {
  button.addEventListener('click', function() {
    var item = button.parentNode;
    item.style.height = item.offsetHeight + 'px';
    item.style.overflow = 'hidden';
    item.style.transition = 'height 0.3s ease';
    item.style.height = 0;
    setTimeout(function() {
      item.parentNode.removeChild(item);
    }, 300);
  });
});

在上面的示例中，我们创建了一个包含多个列表项和删除按钮的 ul 元素。当用户单击删除按钮时，我们使用 JavaScript 代码将列表项从底部滑出，并在滑出的过程中将其高度从当前值减小到 0。滑出动画完成后，我们将删除列表项。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67caf65ae46428fe9e393068

在 Material Design 中添加更多的动态效果