我有一个 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/