Слайд-анимация между div - PullRequest
Новая
       56

Слайд-анимация между div

0 голосов
/ 13 июля 2020

Мне нужна ваша помощь, я столкнулся с проблемой при попытке сделать анимацию слайда между div на панели навигации (это ссылки -> home, collection, blog ).

Моя просьба о помощи включает информацию о том, как добавить эффект слайда, когда я нажимаю на один из разделов в главном меню, содержащем теги a ( ссылки )

Я хочу, чтобы блоки div заменяли друг друга в анимации слайдов.

Вот мой фрагмент кода: 

/* global document */
/*eslint no-unused-vars: ["error", { "vars": "local" }]*/
function home_function() {
  "use strict";
  document.getElementById("home").style.display = "block";
  document.getElementById("collection").style.display = "none";
  document.getElementById("blog").style.display = "none";
}

function collection_function() {
  "use strict";
  document.getElementById("home").style.display = "none";
  document.getElementById("collection").style.display = "block";
  document.getElementById("blog").style.display = "none";
}

function blog_function() {
  "use strict";
  document.getElementById("home").style.display = "none";
  document.getElementById("collection").style.display = "none";
  document.getElementById("blog").style.display = "block";
}

function home_op_function() {
  "use strict";
  document.getElementById("home_btn").style.opacity = "1";
  document.getElementById("col_btn").style.opacity = "0.5";
  document.getElementById("blog_btn").style.opacity = "0.5";
}

function col_op_function() {
  "use strict";
  document.getElementById("home_btn").style.opacity = "0.5";
  document.getElementById("col_btn").style.opacity = "1";
  document.getElementById("blog_btn").style.opacity = "0.5";

}

function blog_op_function() {
  "use strict";
  document.getElementById("home_btn").style.opacity = "0.5";
  document.getElementById("col_btn").style.opacity = "0.5";
  document.getElementById("blog_btn").style.opacity = "1";
}
html {
  scroll-behavior: smooth;
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#head_sec {
  font-family: 'expressway';
  height: 176px;
  background-color: #2a2a2a;
  overflow: auto;
  color: white;
}

body {
  margin: 0;
}

#head {
  letter-spacing: 1.3px;
  font-size: 14px;
}

p {
  margin: 0;
}

#lf_stl {
  text-align: center;
  vertical-align: middle;
  font-size: 50px;
  line-height: 176px;
  /*
    position: fixed;
    right: 855px;
    top: 68.1px;
*/
  letter-spacing: 2.2px;
}

#srch:visited {}

#hlp {
  float: left;
  padding-left: 5px;
}

#slsh {
  float: left;
}

#my_act {
  float: right;
}

#checkout {
  float: right;
  padding-right: 358px;
  padding-left: 25px;
}

.main_menu {
  width: 100%;
  height: 110px;
  background-color: #f7f7f7;
  font-family: 'expressway';
}

button {
  background-color: Transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}

button#head {
  color: white;
}

.hd_btn {
  color: white;
}

.main_btn {
  float: left;
  width: 33.33%;
  text-align: center;
  vertical-align: middle;
  line-height: 110px;
  font-weight: 810;
  color: #2a2a2a;
  font-size: 22px;
}

.main_btn:visited {
  text-decoration: underline;
}

a {
  cursor: pointer;
}

#collection {
  display: none;
}

#blog {
  display: none;
}

#col_btn {
  opacity: 0.5;
}

#blog_btn {
  opacity: 0.5;
}

#home_btn:hover {
  opacity: 1;
}

#home_btn {
  width: 80px;
  height: 40px;
  ;
}

#main_pic {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="styles.css" type="text/css">
  <link rel="stylesheet" href="media.css" type="text/css">
  <link rel="stylesheet" href="fonts/fonts.css" type="text/css">
  <script src="https://kit.fontawesome.com/2aa44c19e6.js"></script>

</head>

<body>

  <section id="head_sec">
    <div id="head">
      <!--
                <button class="hd_btn" id="srch">HOME</button>
                <p class="hd_btn" id="slsh">/</p>
                <button class="hd_btn" id="hlp">HELP</button>
                <button class="hd_btn" id="checkout">CHECKOUT</button>
                <button class="hd_btn" id="my_act">MY ACCOUNT</button>
-->
    </div>
    <p id="lf_stl">LIFE STYLE</p>
  </section>
  <section class="main_menu">
    <div class="main_btn"><a id="home_btn" onclick="home_function(); home_op_function()">HOME</a></div>
    <div class="main_btn"> <a id="col_btn" id onclick="collection_function(); col_op_function()">COLLECTION</a></div>
    <div class="main_btn"> <a id="blog_btn" onclick="blog_function(); blog_op_function()">BLOG</a> </div>
  </section>
  <section id="mid_sec">
    <div id="home">
      <img id="main_pic" src="https://images.unsplash.com/photo-1594175157129-8d36c241217c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"> f
    </div>
    <div id="collection">
      y
    </div>
    <div id="blog">
      c
    </div>
  </section>

</body>
<script type="text/javascript" src="main.js"></script>

</html>

Ранняя благодарность, Нив

...