display:none→block　にtransitionを設定したい場合

jQueryを使用して、タブメニュー造りの練習をしています。

jsファイルとの連動も上手く行き、
あとは細かいデザインを変更したりして練習をしていたのですが、

transition: を使用して、
タブメニューの移り変わりに秒数を設定することができました。

が、表示させるul .showの
display:none;→display:blockにtransitionを設定する事は可能でしょうか？

タブメニューの色にtransitonを指定した時と同じ様に、
大元の.area ulに指定をするのが正しいと思ったのですが、
上手く行きません。

cssに設定をするのみでは、不可能なのでしょうか？

ご回答、よろしくお願いします。

html
1
2<!DOCTYPE html>
3<html lang="ja">
4
5<head>
6  <meta charset="utf-8">
7  <title>JavaScript Test</title>
8  <link rel="stylesheet" href="main.css">
9</head>
10<body>
11 
12<ul class="tab clearfix">
13  <li class="active">関東</li>
14  <li>関西</li>
15  <li>九州</li>
16</ul>
17 
18
19<div class="area">
20  <ul class="show">
21    <li>東京</li>
22    <li>新宿</li>
23    <li>横浜</li>
24  </ul>
25  <ul>
26    <li>梅田</li>
27    <li>難波</li>
28    <li>三宮</li>
29  </ul>
30  <ul>
31    <li>小倉</li>
32    <li>博多</li>
33    <li>久留米</li>
34  </ul>
35</div>
36  <!-- jQuery -->
37  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
38  <script src="js/web-tab.js"></script>
39</body>
40
41</html>

css
1
2.tab {
3  border-bottom: 3px solid #fb4343;
4}
5.tab li {
6  color: #333;
7  float: left;
8  margin: 0 10px -1px 0;
9  padding: 10px 20px;
10  border: 1px solid #fb4343;
11  cursor: pointer;
12  list-style: none;
13  transition: .8s;
14}
15
16.tab li.active {
17  color: #fff;
18  background: #fb4343;
19  cursor: auto;
20}
21 
22.area ul {
23  display: none;
24  clear: both;
25  transition: .8s;
26}
27
28.area .show {
29  display: block;
30}
31
32.area{
33  border: 1px solid #fb4343;
34  margin-top: 42px;
35}
36

jQuery
1
2$(function() {
3 
4  $('.tab li').click(function() {
5    const index =$('.tab li').index(this);
6
7    $('.tab li').removeClass('active');
8
9    $(this).addClass('active');
10
11    $('.area ul').removeClass('show').eq(index).addClass('show');
12  });
13
14});
15