how to use css Transition on displaying block when doing hover on different block?

HTML

<div class="onediv"><a href="">text</a></div>
<div class="nextdiv">
 <p>testing testing testing testing testing testing testing testingtesting.
 </p>  
</div>

CSS

.nextdiv{display: none;}

JQUERY

$( ".onediv a" ).hover(function() {
 $('.nextdiv').css({'display' : 'block'});
});

$( ".onediv a" ).mouseleave(function() {
  $('.nextdiv').css({'display':'none'});
});

When I hover to text then .nextdiv will display. Now I want to apply transition when that .nextdiv will display. thankyou in advance.