javascript - 保存 SPA 字段时无法协调 CSS 样式和内容的动画-6ren

javascript - 保存 SPA 字段时无法协调 CSS 样式和内容的动画

转载作者：行者123 更新时间：2023-11-28 03:23:37

25

4

我有一个 SPA 正在保存各个表单字段。我试图通过在字段周围放置一个绿色框并在右侧显示“已保存”一词来更新值时提供用户反馈。我已经能够在字段周围放置一个框并添加“已保存”文本，但我无法让它们以有序的方式出现/消失。我怀疑这是因为我正在尝试同时进行动画和翻译以及添加/删除类并且没有完全理解这个过程，因为我更像是开发人员而不是设计师。有人能指出我正确的方向吗，我将不胜感激。

$(document).ready(function() {
  var self = this;

  $("#field1").on('change', function() {
    var el = $(this);

    el.addClass("saveIndClass");


    setTimeout(function() {
      el.removeClass("saveIndClass");
    }, 1000);
  });
});

.saveField {
  borAder: 1px solid transparent;
  padding: 2px;
  display: inline-block;
  border-radius: 5px;
  content: "";
  position: relative;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1px 1s ease-in-out;
  -o-transition: all 1px 1s ease-in-out;
  transition: all 1px 1s ease-in-out;
}

.saveIndClass {
  border: 1px solid #5CBA49;
  padding: 2px;
  display: inline-block;
  border-radius: 5px;
}

.saveIndClass::before {
  content: "Saved";
  color: #5CBA49;
  font-size: 9px;
  position: absolute;
  top: -12px;
  right: 0px;
  opacity: 0;
  animation: fade 1s linear;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <BR/>
  <form>
    <div id="field1" class="saveField">
      <select class="form-control input-xs">
        <option value=""></option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select>
    </div>
  </form>

</body>

一个额外的请求是，我所拥有的似乎在 Chrome 中工作，但在 Firefox 中只能部分工作(“已保存”在第一次更改时显示，但在以后的更改中不显示)。

最佳答案

这个例子它工作得很好，它只是添加绿色边框:

  <form>
    <div id="field1">
      <div class="text">
          <span>Saved</span>
          <select class="form-control input-xs">
            <option value=""></option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </div>

    </div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  </form>

.saveField {
  border: 1px solid transparent;
  padding: 2px;
  display: inline;
  border-radius: 5px;  
  position: relative;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1px 1s ease-in-out;
  -o-transition: all 1px 1s ease-in-out;
  transition: all 1px 1s ease-in-out;
}

.text {  
  padding: 2px;
  border-radius: 5px; 
}

.text span {  
  opacity: 0;
  color: green;
  display: block;
}


$(document).ready(function() {
  var self = this;

  $("#field1").on('change', function() {
    var el = $(this),
        txtEl = el.find('.text span');

    txtEl.animate({"opacity": 1}, 2000, function(){
        txtEl.animate({"opacity": 0})
    });

  });
});

希望这能帮助您解决这个问题。祝你好运;)

关于javascript - 保存 SPA 字段时无法协调 CSS 样式和内容的动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45103607/

25

4

0

文章推荐： html - ionic 输入的 Ionic 3 键盘问题

文章推荐： javascript - IOS防止touchmove事件被固定元素后面的body捕获

文章推荐： php - $_GET 在 php 中不返回任何值

文章推荐： javascript - 从javascript访问 Angular Controller

带点的Java数组(协调)
我想在包含点的主要方法中创建一个数组像 p={(3,8),(2,8)}与这个类 public class Point { private float x,y; public Point
elasticsearch - 专用Elasticsearch提取(协调)节点
在Elasticsearch中，建议将摄取节点设置为专用节点吗？我打算在k8s集群上运行Elasticsearch，并允许将提取容器安排在也运行其他Java服务容器的工作程序节点上。这是用于生产的良好
协调/控制多个 C 应用程序
我最初的想法是使用管道来协调和控制多个C应用程序，并以shell脚本作为执行程序。假设一个 C 应用程序“A”执行 X，另一个 C 应用程序“B”执行 Y。shell 脚本通过 A 和 B 的 IPC
java - 协调 jackson 操作的数据类型
我在 json 文件中收集了推文集合。我想对它们进行操作，例如根据每个数据条目的时间和坐标对推文进行分组。目前，对于对象坐标，我将它们放在列表数据类型中。与时间和日期类似。所以我已经成功地解析了它们，
javascript - 协调 Firefox 斜杠处理和键代码
我有一个网页，用户应该可以在任何地方输入并跟踪他们的输入。一个问题是 firefox 中的斜线键“/”是打开搜索的快捷方式。这对我来说是不可取的。我还没有找到一种方法来捕获搜索功能并且仍然将输入添加到
javascript - 协调 View /调度事件
我正在尝试使用 d3.dispatch 协调多个 View /控件和 Dispatching Events block 来指导我。然而，我遇到了概念上的障碍。考虑以下 View /控件: 国家/地区下
linux - 协调 Kaldi 食谱的链接和路径文件
我在一台计算机上使用 Kaldi 工具集进行语音识别，但我无权修改 /var/kaldi 中的安装内容。该目录包含一个脚本文件夹，作为使用示例提供，这些脚本也彼此紧密链接。结构如下，数据集mydat
c - 协调 C 中数组的声明和使用语法
在 C 中，“数组语法”只是指针语法的语法糖。那是a[4] 转换为 *(a+4)。但这并不总是正确的。当然下面是荒谬的， int a[4] = {1,2,3,4}; int *(a+4) =
c# - 协调 3 个列表的最佳算法
我正在寻找一种方法来协调来自 3 个不同来源的元素。我已经将元素简化为只有一个键(字符串)和版本(长)。列表是同时获得的(2 个来自单独的数据库查询，1 个来自另一个系统上的内存缓存)。对于我的最
architecture - 协调 DDD、 View 模型和性能
我开始了解 DDD，并担心从持久性中检索实体对象然后在 UI 的 View 模型中重构它们的性能影响。假设我有两个聚合根: Person Orders ------ ------
javascript - React 协调 - props diff
我将 jQuery Flotchart 组件打包为 React 组件，每当组件属性发生更改时，我都需要调用图表实例的 plot 方法。我最终得到的是 shouldComponentUpdate 钩子
iphone - 存储省份、城市并与 plist 协调
如何在.plist中存储省份、城市和坐标信息？这些信息应该随我的应用程序一起提供。我尝试过以下格式，但不起作用。有没有其他方法可以替代plist？因为plist不利于查询。 ProvinceN
iOS SpriteKit 协调 origin 问题
我一直在玩弄 SpriteKit，因为我想在一年内制作一款游戏，但最近我遇到了一些奇怪形式的减速带。这就是问题所在。我已经创建了一个常规的 SpriteKit 项目并更改了一些默认代码。我在位置
c# - 协调 2 个长度不同的数组 c#
我有两个数组，在我的 C#/.NET Windows Forms 应用程序中使用 ChartDirector( http://www.advsofteng.com/product.html ) 将它们
algorithm - 协调 Quine-McCluskey 算法
我正在查看 article on wikipdia对于这个算法，我看到了两个看似矛盾的说法: "it also gives a deterministic way to check that the
ios - 协调 CACurrentMediaTime() 和 deviceCurrentTime
我正在尝试将多个 CABasicAnimations 与 AVAudioPlayer 同步。我遇到的问题是 CABasicAnimation 在安排动画时使用 CACurrentMediaTime()
git - 协调 Git 流程和 QA
我们的项目正在使用 gitflow 详情 here我的问题是 QA 如何融入其中。假设我有一个 master 分支和一个 hotfix 分支。一旦修补程序完成，我相信 QA 应该在修补程序发布时完成
javascript - 协调 ASP.NET 脚本包和源映射
有什么方法可以设置默认的 System.Web.Optimization.ScriptBundle 来生成 source maps对于捆绑和缩小的文件？除了必须在每次构建之前预先生成包和源映射之外，是
javascript - 协调 ASP.NET 脚本包和源映射
有什么方法可以设置默认的 System.Web.Optimization.ScriptBundle 来生成 source maps对于捆绑和缩小的文件？除了必须在每次构建之前预先生成包和源映射之外，是
git - 在 gitconfig 上为每个分支指定不同的 pull 协调
更新到 Git 2.28 后，我意识到 conditional includes .但是，我无法找到一种方法来为 master(main) 设置不同的 pull reconciliation 选项，而

首页

博学

6Ren·AI

商城

javascript - 保存 SPA 字段时无法协调 CSS 样式和内容的动画