如何在进行过渡时淡入元素

Question

这是我的问题：

http://jsfiddle.net/GDj7v/

$(document).ready(function () {
    $("#field-type").change(function () {
        $val = $(this).val();
        if ($val == "checkbox") {
            $("#check-boxes").addClass("shown");
        } else {
            $("#check-boxes").removeClass("shown");
        }
    })
});

请单击字段类型并选中复选框。我显示隐藏选项的良好过渡正在起作用。但是我想隐藏#check-boxes元素，这样它就不会在Field type和Description之间有那么多的空白。我尝试display:none #check-boxes元素，然后在Javascript fadeIn中，我得到了非常小故障的结果。

有可能做到吗？

Answer 1

像这样的东西？

$(document).ready(function() {
    $('#check-boxes').hide();
    $("#field-type").change(function() {
        $val    = $(this).val();
        if($val == "checkbox") {
            $('#check-boxes').show(0, function(){
                $("#check-boxes").addClass("shown");
            });
        } else {
            $("#check-boxes").removeClass("shown");
        }
    })
});

http://jsfiddle.net/GDj7v/3/

Answer 2

jQuery内置了淡入/淡出的方法。例如：

//replace $("#check-boxes").addClass("shown"); with
$("#check-boxes").show(400); //fade in 400 ms, essentially the same as jQuery's fadeIn()
//$("#check-boxes").removeClass("shown"); with
$("#check-boxes").hide(400); //fade out 400 ms, essentially the same as jQuery's fadeOut()

显示文档
隐藏文档

此外，对于自定义动画，您可能需要查看jQuery的animate函数。查看文档以获取详细帮助。

Answer 3

您可以通过将

.form-group节点的 margin-bottom 属性设置为 0 来轻松更改此设置：

.form-group {
    margin-bottom: 0;
}

Answer 4

如果你想使用不透明的slideDown()和slideUp()，你可以使用animate()

if ($val == "checkbox") {
 $("#check-boxes").css('opacity', 0).slideDown('slow').animate({ opacity: 1 },{duration: 'slow' });
        } else {
$("#check-boxes").css('opacity', 1).slideUp('slow').animate({ opacity: 0 },{duration: 'slow' });
        }
})

演示小提琴

Answer 5

添加以下样式：

#check-boxes {
  transition: all 1.2s ease-in-out;
  transform: translateX(250px) rotateX(135deg);
  opacity: 0;
display: none;
}
#check-boxes.shown {
  transform: translateX(0px) rotateX(0deg);
  opacity: 1;
    display:block  
}

Answer 6

我明白你的意思，我得到的结果不一致。如您所料，显示不可动画化，这可能是将过渡与过渡相结合时的问题。我尝试转换高度，但这让它看起来很奇怪。

最后，我使用 setTimeout 来分离更改显示属性并进行转换：

http://jsfiddle.net/BYossarian/GDj7v/28/

网页更改：

<div id="check-boxes" class="hidden">

CSS添加了：

.hidden {
    display: none;
}

.JS：

$(document).ready(function () {
    $("#field-type").change(function () {
        var $val = $(this).val(),
            checkboxes = $("#check-boxes");
        if ($val === "checkbox") {
            checkboxes.removeClass('hidden');
            setTimeout(function () {
                checkboxes.addClass('shown');
            }, 10);
        } else {
            checkboxes.removeClass('shown');
            setTimeout(function () {
                checkboxes.addClass('hidden');
            }, 1210);
        }
    });
});

编辑/替代解决方案：此外，将transition属性规则移动到#check-boxes.shown规则中意味着转换仅在一个方向上发生，这消除了我遇到的高度看起来很糟糕的问题：

http://jsfiddle.net/BYossarian/GDj7v/30/

.CSS：

#check-boxes {
    -webkit-transform: translateX(250px) rotateX(135deg);
    transform: translateX(250px) rotateX(135deg);
    opacity: 0;
    height: 0;
}
#check-boxes.shown {
    transition: all 1.2s ease-in-out;
    -webkit-transform: translateX(0px) rotateX(0deg);
    transform: translateX(0px) rotateX(0deg);
    opacity: 1;
    height: auto;
}