Question

我有以下代码

HTML

<a href="#" class="close">Close</a>

 <div class="box">

    <input type="text">

    <input type="text">

    <input type="text">

</div>

的jQuery

$(document).ready(function () {

    $('.box').on('click', function () {
        $(this).addClass('animated');
    });

    $('.close').on('click', function () {
        $('.box').removeClass('animated');
    });

});

CSS

.box {
    width: 0;
    height: 0;
    background: #e2e2e2;
    border-radius: 50%;
    padding: 30px;
    transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
    overflow: hidden;
}
input {
    opacity: 0;
    border: 1px solid #fff;
    transition: opacity 0.3s ease;
    transition-delay: 0.3s;
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 5px;
    box-sizing: border-box;
}
.box.animated {
    border-radius: 0;
    width: 400px;
    height: 400px;
    padding: 20px;
}
.box.animated > input {
    opacity: 1;
}

DEMO

有两件事

1）扩展框后，输入元素应该是可见的。我使用transition-delay属性实现了这一点。

2）但是当单击关闭链接时，输入不透明度应为0，当输入完全不可见时，框应该转到其先前的形状，即圆形。

问题：我如何实现＃2

Answer 1

将此添加到css

.box:not(.animated){
    transition-delay:0.3s;
}
.box:not(.animated) input{
    transition-delay:0s;
}

https://jsfiddle.net/apLtw7av/2/

说明： transition-delay属性将取决于课程animated。点击关闭将删除animated类，因此新transition-delay

Answer 2

尝试显示/隐藏输入字段，如下所示：

$(document).ready(function () {

    $('.box').on('click', function () {
        $('.box input').show();
        $(this).addClass('animated');
    });

    $('.close').on('click', function () {
        $('.box input').hide();
        $('.box').removeClass('animated');
    });

});

Answer 3

所以这是我的anwser和EXAMPLE

/*this*/
transition: all 0.3s ease;

/*is the same  as*/
transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;

您需要做的唯一更改是添加延迟到框，以便在输入之后启动，所以它就像< strong>输入延迟+输入转换时间（查看css中的注释以查看需要使用的值）

还有一个提示，当您在转换中使用相同的值时，您可以使用所有

$(function() {
 $('.myTable td').each(function () {
  if($.isNumeric($(this).html())) {
    $(this).html($(this).html().replace('.', ','));
  }
 });
});

如何延迟修改css转换

3 个答案:

希望这有助于T04435