Выполните анимацию, добавив класс к элементу

Question

Я пытаюсь создать меню, которое воспроизводит анимацию при нажатии (div с текстом вылетает). При нажатии на другой элемент в меню текущий div исчезает, а следующий появляется.

Я пытаюсь сделать это, добавляя класс transorm transiracy и воспроизводя анимацию. Уже несколько часов пытаюсь, но ничего не работает. Кто-нибудь может увидеть, что я делаю не так?

document.getElementsByClassName('.link').onclick = function("myFunction");

function myFunction() {
  var element = document.getElementById("panel");
  element.classList.add("textcss");
}

<nav>
  <ul>
    <li><a class="link" href="#0">1</a></li>
    <li><a class="link2" href="#0">2</a></li>
    <li><a class="link3" href="#0">3</a></li>
  </ul>
</nav>
<div class="text">
  <div class="panel1" id='panel'>
    <p>PANEL1 <br><br></p>
  </div>
  <div class="panel2" id='panel'>
    <p>PANEL2</p>
  </div>
  <div class="panel3" id='panel'>
    <p>PANEL 3</p>
  </div>
</div>

Answer 1

https://jsfiddle.net/chille1987/60uqp7jt/9/

JS - Jquery

let link = $('.link');
let panel = $('.panel');

link.click(function() {
    let dataId = $(this).attr('data-id');
    panel.hide();
    $('#'+ dataId).show();
});

CSS

.panel {
    display: none;
}

HTML

<nav>
  <ul>
    <li><a class="link" href="#0" data-id="panel-1">1</a></li>
    <li><a class="link" href="#0" data-id="panel-2">2</a></li>
    <li><a class="link" href="#0" data-id="panel-3">3</a></li>
  </ul>
</nav>
<div class="text">
  <div class="panel" id="panel-1">
    <p>PANEL1 <br><br></p>
  </div>
  <div class="panel" id="panel-2">
    <p>PANEL2</p>
  </div>
  <div class="panel" id="panel-3">
    <p>PANEL 3</p>
  </div>
</div>

Answer 2

Спасибо всем огромное! Я go попробую это!

Answer 3

Ваши требования немного сложны, это будет очень просто, если вам нужен только один эффект, либо летать, либо затухать, но вам нужно 2 из них, поэтому вам нужно манипулировать классами для затухания и эффекта полета, вы можете изменить левое и верхнее зелья, чтобы изменить свой эффект полета.

$(document).ready(function(){
        $('.link').click(function(){
            $('.link').removeClass('active');
            $(this).addClass('active');
            var realtion = $(this).data('relation');
            $('.text .panel').removeClass('active').addClass('stayHere');
            $('.text').find('#' + realtion).addClass('active').removeClass('stayHere');
            setTimeout(function(){
                $('.text .panel').removeClass('stayHere')
            },1000);
        });
        
    });

.text {
        position: relative;
    }
    .link {cursor: pointer;}
    .text .panel {
        position: absolute;
        left: 200px;
        transition: top 1s, left 1s, opacity 1s;
        top: -200px;
        opacity: 0;
    }
    .text .panel.active {
        top: 0;
        left: 0;
        display: block !important;
        opacity: 1;
    }
    .stayHere {
        top: 0 !important;
        left: 0 !important;
        opacity: 0 !important;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a class="link" data-relation="panel1">1</a></li>
    <li><a class="link" data-relation="panel2">2</a></li>
    <li><a class="link" data-relation="panel3">3</a></li>
  </ul>
</nav>
<div class="text">
  <div class="panel" id='panel1'>
    <p>PANEL1 <br><br></p>
  </div>
  <div class="panel" id='panel2'>
    <p>PANEL2</p>
  </div>
  <div class="panel" id='panel3'>
    <p>PANEL 3</p>
  </div>
</div>