如何延迟修改 css 转换

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) 但是，当首先单击关闭 link 时，输入的不透明度应为 0，当输入完全不可见时，框应变为其先前的形状，即圆形。

问题：如何实现#2

Answer 1

尝试 show/hide 像这样输入字段：

$(document).ready(function () {

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

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

});

Answer 2

将此添加到 css

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

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

说明： transition-delay 属性将根据 class animated 应用。单击关闭将删除 animated class 因此应用新的 transition-delay

Answer 3

这是我的答案和 EXAMPLE

HTML
<span class="close">X</span>
<div class="box">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

CSS
.box {
  width: 0;
  height: 0;
  background: #e2e2e2;
  border-radius: 50%;
  padding: 30px;
  transition: all 300ms ease 600ms; /*This is the only thing You need to change*/
  overflow: hidden;
}
input {
  opacity: 0;
  border: 1px solid #fff;
  transition: all 300ms ease 300ms; /*input delay + input transition time 300 + 300 = 600*/
  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;
}

.close{
  cursor:pointer;
  position: absolute;
  top:0px;
  font-weight:bolder;
  font-size:1.5rem;
  display:none;
}

JQuery
$(document).ready(function () {

  $('.box').on('click', function () {
    $(this).addClass('animated');
    $('.close').css({display:"block"});
  });

  $('.close').on('click', function () {
    $('.box').removeClass('animated');
    $(this).css({display:"none"});
  });

});

您需要做的唯一改变是向框添加一个延迟，以便它在输入之后开始，所以它就像输入延迟+输入转换时间（看看css中的注释，看看你需要的值玩)

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

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

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

如何延迟修改 css 转换

How to revise the css transitions with a delay

html

css

jquery

css-transitions

希望这对您有所帮助 T04435