通知我按钮的 UI 交互

【问题标题】：UI interaction for a notify me button通知我按钮的 UI 交互
【发布时间】：2017-06-26 07:08:24
【问题描述】：

我正在尝试从 dribble 模仿 UI 交互，但由于某种原因，在我选择发送选项后动画很混乱。

请看一下我的笔以了解我的意思。谢谢！

http://codepen.io/sofiyashakeel/pen/PWdxdb

这是我的代码在点击发送按钮时的样子：

$(function() {
  $("#send").click(function() {
    setTimeout(function() {
      $("button").removeClass("onclic");

      $(".info").addClass("hidden");

      $("button").addClass("validate", callback);
    }, 1050);
  });
});

【问题讨论】：

The animation is messy after I select the send option - 这很有解释性。您究竟预计会发生什么？是您想出现在其他地方还是其他地方出现的白色文本？或者文本应该尽快消失还是根本不消失？还是应该跟随动画？
对此我很抱歉！当“谢谢”出现时，我需要显示“发送”的白色文本消失，但尽管我删除了相应的类，但它并没有发生。

标签： jquery css user-interface animation button

【解决方案1】：

似乎您的问题是您在大多数地方使用 button 而不是 .button 类，这会将效果应用于页面上的所有按钮，而不仅仅是带有 .button 类的按钮。

在 CSS 中，我将 button{...} 更改为 .button{}，在您的 JS 代码中，我将所有对 button 的引用更改为 .button，这似乎已修复。

您的示例代码如下所示：

$(function() {
  $("#send").click(function() {
    setTimeout(function() {
      //$("button").removeClass("onclic");
      $(".button").removeClass("onclic");

      $(".info").addClass("hidden");

      //$("button").addClass("validate", callback);
      $(".button").addClass("validate", callback);
    }, 1050);
  });
});

无法让 SCSS 在 sn-p 中工作，因此更新了下面的 CodePen。

Updated CodePen

【讨论】：