html - 如何为可见的跨度设置动画？

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>