1

我试图仅在用户对表单进行更改后才显示表单submit和按钮。reset我原来的方法很简单：hidden在页面加载时为按钮添加一个类，并在修改表单时将其删除。这工作得很好。但是当我在混合中添加过渡时，过渡发生在我最初hidden在页面加载时添加类时，这是不需要的。

这是相关代码（或在 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第一次添加课程后启用转换？

4

1 回答 1

1

您也可以将过渡移至其自己的类。在页面加载时，添加隐藏类，然后在超时后添加转换类。

在这种情况下，超时是让浏览器立即应用/渲染隐藏类的 opacity: 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');
        }
    );
});
于 2013-07-18T15:28:42.310 回答