我只是在用户对表单进行更改后才尝试显示表单的submit
和reset
按钮。我原来的方法很简单:在页面加载时向按钮添加hidden
类,并在修改表单时将其删除。这很好用。但是当我在混合中添加转换时,转换发生在我最初在页面加载时添加hidden
类时,这是不需要的。
以下是相关代码(or see it live on jsfiddle):
HTML
<form>
<input type="text" />
<input type="submit" value="Save" />
<input type="reset" value="Reset" />
</form>
CSS
input[type=submit], input[type=reset] {
transition: all 0.6s ease-in-out;
&.hidden {
opacity: 0;
}
}
javascript(使用JQuery 1.9.1)
$(document).ready(function () {
var buttons = $('input[type="submit"], input[type="reset"]').addClass('hidden');
$('form').on(
'change input',
':input',
function () {
buttons.removeClass('hidden');
}
).on(
'reset',
function () {
buttons.addClass('hidden');
}
);
});
如何在第一次添加hidden
课程后才启用转换?
答案 0 :(得分:1)
您也可以将过渡移动到自己的类。在页面加载时,添加隐藏的类,然后在超时后添加转换类。
在这种情况下,超时是让浏览器立即应用/渲染隐藏类的不透明度:0样式,没有任何转换时间。一旦发生这种情况,添加转换类会导致任何进一步的更改,以便在适用时使用转换时间。
类似于(jsfiddle):
$(document).ready(function () {
var buttons = $('input[type="submit"], input[type="reset"]').addClass('hidden');
window.setTimeout(function() { buttons.addClass('txclasshere'); }, 0);
$('form').on(
'change input',
':input',
function () {
buttons.removeClass('hidden');
}
).on(
'reset',
function () {
buttons.addClass('hidden');
}
);
});