在display上执行转换效果：none with hack

我想平滑地显示div display:none to display:block 。 我知道无法display:none ，所以我首先尝试应用display:block然后执行转换，但这不起作用。

HTML

CSS

 .div { display: none; visibility: hidden; opacity: 0; height: 100px; width: 100px; background: #000; transition: 2s; } .block { display:block; } .div-focused { visibility: visible; opacity: 1; transition: 2s; } .one { background: #ff0; } 

jQuery的*

 $(document).ready(function() { $(".inp").on("keyup", function () { if ( !$(this).val() ) { $(".div").removeClass("one"); } else { $(".div").addClass("block"); $(".div").addClass("div-focused"); $(".div").addClass("one"); } }); }); 

这是jsfiddle

Answer 1

你问了一个黑客？ Element.offsetTop是你的朋友。

当您请求此属性时，将强制浏览器对页面进行重排，因此会添加类并且可以同步触发转换。

 $(document).ready(function() { $(".inp").on("keyup", function() { var $div = $('.div'); if (!$(this).val()) { $div.removeClass("one"); } else { $div.addClass("block"); $div[0].offsetTop; // here is the magic $div.addClass("div-focused one"); } }); }); 

 .div { display: none; visibility: hidden; opacity: 0; height: 100px; width: 100px; background: #000; transition: 2s; } .block { display: block; } .div-focused { visibility: visible; opacity: 1; transition: 2s; } .one { background: #ff0; } 

Answer 2

 $(document).ready(function() { $(".inp").on("keyup", function () { if ( !$(this).val() ) { $(".div").removeClass("one"); } else { $(".div").addClass("block"); $(".div").addClass("one"); $(".div").animate({opacity: "1"},500); } }); }); 

jsfiddle尝试这个

Answer 3

 $(document).ready(function() { $("div").hide(); $(".inp").on("keyup", function () { if ( $(this).val()=="") { $("div").fadeOut(3000); } else { $("div").fadeIn(4000); } }); }); 

 .div { height: 100px; width: 100px; background: red; transition: 2s; } .block { display:block; } .div-focused { visibility: visible; opacity: 1; transition: 2s; } .one { background: #ff0; } 

Answer 4

用下面的代码替换你的css和脚本。

 /* style */ .div { display: none; height: 100px; width: 100px; background: #000; } /* Script */ $(document).ready(function() { $(".inp").on("keyup", function () { if ( !$(this).val() ) { $(".div").css("opacity",0); } else { var item = $(this).val(); var length = item.length; var opacity = length/10; $(".div").css("display","block"); $(".div").css("opacity",opacity); } }); }); 

尝试dis： https ： //jsfiddle.net/priyaraj/ggqztzvh/