jQueryを使わずjavaScriptのみで、スライドする様にfadeIn()fadeOut()を表現したい。

前提・実現したいこと

jQueryを使わずjavaScriptのみで、スライドする様にfadeIn()fadeOut()を表現したいです。
現在のコード状況は、タブをクリックすると、該当のコンテンツが表示されるところまではできています。
ここに下記リンクの様に、コンテンツをスライドさせてフェードインフェードアウトさせる機能を追加したいです。
リンク内容
どのようにjavaScriptを記述したら表現できますでしょうか。
詳しい方おりましたら、ご教授お願いいたします。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8" />
5    <title>Tabs menu</title>
6    <link rel="stylesheet" href="main.css" />
7  </head>
8  <body>
9    <div class="container">
10      <ul class="menu">
11        <li><a href="#" class="active" data-id="about">タブ１</a></li>
12        <li><a href="#" data-id="service">タブ２</a></li>
13        <li><a href="#" data-id="contact">タブ３</a></li>
14      </ul>
15      <section class="content active" id="about">コンテンツ１</section>
16      <section class="content" id="service">コンテンツ２</section>
17      <section class="content" id="contact">コンテンツ３</section>
18    </div>
19    <script src="main.js"></script>
20  </body>
21</html>
22

css
1body {
2  font-size: 14px;
3}
4
5.container {
6  margin: 30px auto;
7  width: 210px;
8} 
9
10.menu {
11  list-style: none;
12  padding: 0;
13  margin: 0;
14  display: flex;
15  width: 210px;
16}
17
18.menu li a {
19  display: inline-block;
20  color: #333;
21  text-decoration: none;
22  padding: 7px 7px;
23  border-radius: 4px 4px 0 0;
24}
25
26.menu li a.active {
27  background: #FFC0CB;
28  border: 3px solid #8EB8FF;
29  box-shadow: 0px 0px 5px #8EB8FF;
30  padding: 4px 4px;
31  transition: 0.1s;
32}
33
34.menu li a:not(.active):hover {
35  background: #eee;
36}
37
38.content.active {
39  font-size: 20px;
40  color: #666;
41  border: 2px solid #000;
42  width: 206px;
43  display: block;
44} 
45
46.content {
47  display: none;
48}
49

javaSript
1'use strict'
2
3{
4  const menuItems = document.querySelectorAll('.menu li a');
5  const contents = document.querySelectorAll('.content');
6  menuItems.forEach(clickedItem  => {
7    clickedItem.addEventListener('click', (e) => {
8        e.preventDefault();
9
10        menuItems.forEach(item => {
11          item.classList.remove('active');
12        });
13        clickedItem.classList.add('active');
14
15        contents.forEach(content => {
16          content.classList.remove('active');
17        });
18        document.getElementById(clickedItem.dataset.id).classList.add('active');
19    });
20  }); 
21}