如何动画跨度变得可见？

Question

使用下面的CSS我有一些卡，当我把鼠标悬停在他们将显示使用内部div额外的信息。但是，当div变大因为现有的div中的额外div将被显示时，只有颜色变化是动画的，但是由于其中的额外信息，卡的大小不会生成动画。现在有人有解决方案吗？

/* geschiedeniskaart */ 
    .geschiedeniskaart 
    { 
     width:350px; 
     background-color: #E0F0FF; 
     box-shadow: 3px 3px 1px #888888; 
     margin-top:20px; 
     margin-left:5px; 
     transition: all 1s ease; 
    } 

.geschiedeniskaartdatum 
{ 
    width:350px; 
    background-color: #001433; 
    box-shadow: 3px 3px 1px #888888; 
    margin-top:20px; 
    margin-left:5px; 
} 

.geschiedeniskaartdatum .tekst { 
    font-size:1.1 em; 
    margin-left:20px; 
    color: white; 
    line-height: 20px; 
} 

.geschiedeniskaart .tekst{ 
    font-size:.9 em; 
    margin-left:20px; 
    color: #00004C; 
    line-height: 20px; 
} 

.geschiedeniskaart .visibletekst { 
    display:none; 
    transition: all 1s ease; 
} 

.geschiedeniskaart:hover { 
    background-color: white; 
} 

.geschiedeniskaart:hover .visibletekst { 
    display: block; 
    line-height : 30px; 
} 

的HTML看起来是这样的：

<div class="geschiedeniskaart"> 
<div class="row"> 
<div class="col-xs-12"> 
<span class="tekst">Title</span> 
</div></div> 

<div class="row visibletekst"> 
<div class="col-xs-6"><span class="tekst">I am visble when hovering over tittle</span></div><div class="col-xs-6"><span class="tekst">Date</span></div></div></div> 

Answer 1

做这一切的方式是这样的。

$(document).ready(function(){ 
 
    var dd = $('dd'); 
 
    var dt = $('dt'); 
 
    dd.hide(); 
 
    $('dl').on('mouseenter','dt',function(){ 
 
    $(this).next().slideDown(400); 
 
    $('h1').fadeIn(1000); 
 
    dt.mouseleave(function(){ 
 
    $(this).next().slideUp(400); 
 
     $('h1').fadeOut(1000); 
 
     }); 
 
    /*can do the following as well:note the event delegationxx 
 
    $('dl').on('mouseenter','dt',function(){ 
 
    $(this).next() 
 
.show(400). 
 
siblings('dd'). 
 
hide(); 
 
    
 
     
 
    });*/ 
 
    
 
    }); 
 
}); 
 

 
(function(){ 
 
    
 
$('<h1></h1>',{ 
 
    text:"Hover for answers", 
 
    class: 'myclass' 
 
}).prependTo('body'); 
 
})(); 
 
$('h1').click(function(){ 
 
    
 
    $(this).hide('slow', function() { 
 
    $(this).insertAfter('p'); 
 
    }); 
 
    
 
});

dl{padding:10px;text-align:center;background:silver;width:90%;margin:0 auto;border-radius:4px;} 
 
dt{padding:5px;border:2px grey solid;font-size:2em;font-weight:bold;border-radius:5px;} 
 
dd{font-size:1.5em;color:grey;} 
 
h1 {font-size:1em;color:mediumpurple;} 
 
.myclass{background:silver;text-align:center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<dl> 
 
    <dt>HOW are you bro</dt> 
 
    <dd>very nice, thank you<p></p></dd> 
 
    <dt>HOW are you bro</dt> 
 
    <dd>very nice, thank you</dd> 
 
    <dt>HOW are you bro</dt> 
 
    <dd>very nice, thank you</dd> 
 
    <dt>HOW are you bro</dt> 
 
    <dd>very nice, thank you</dd> 
 
    
 
</dl>