установить переход на нет при изменении размера

Question

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

я получил этот код CSS в sass

$(document).ready(function(){
  menu();
  resize();
});

$(window).resize(function(){
  resize();
})



function menu(){
   $("#open-menu").click(function(){
      $("#mobile-menu div div").animate({"width":"100%"});
      $("#mobile-menu").css("z-index", "10");
      $("#menu-options").css("display","flex");
   });


   $("#close-menu").click(function(){
      $("#mobile-menu div div").animate({"width":"0%"});
      $("#mobile-menu").css("z-index", "-10");
      $("#menu-options").css("display","none");
      
   });
}



function resize(){
   var card = $("#card img").height();
   $("#card").css("height", card+"px");
   $("body").css("transition", "0s");
}

* {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
}
 html {
     scroll-behavior: smooth;
}
 body .container {
     width: 90%;
     max-width: 1920px;
     margin: auto;
}
 body h1, body h2, body h3, body h4, body h5, body h6 {
     font-family: Domine, serif;
}
 body p, body a {
     font-family: Roboto, sans-serif;
     text-decoration: none;
}
 body ul {
     list-style: none;
}
 header {
     position: fixed;
     left: 0;
     top: 0;
     right: 0;
     padding-top: 30px;
     padding-bottom: 30px;
     background: #ffffff;
     z-index: 100;
     box-shadow: #ecf0f1 1px 0 3px;
}
 header .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
}
 header .container a {
     font-size: 1.1rem;
     color: #000;
}
 header .container input {
     display: none;
}
 header .container #open-menu, header .container #close-menu {
     display: none;
}
 header .container nav ul li {
     display: inline-block;
     padding-right: 20px;
}
 header .container nav ul li:last-child {
     padding-right: 0;
}
 @media screen and (max-width: 768px) {
     header .container #open-menu {
         display: block;
    }
     header .container input:checked ~ #open-menu {
         display: none;
    }
     header .container input:checked ~ #close-menu {
         display: block;
    }
     header .container input:checked ~ .about {
         background: red;
    }
     header .container nav {
         display: none;
    }
}
 .about {
     height: 100vh;
     position: relative;
     margin-top: 50px;
}
 .about .container {
     height: 100vh;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
}
 .about .container .img-container {
     width: 35%;
}
 .about .container .img-container #card {
     position: relative;
     width: 80%;
     transition: all 0.7s linear;
     transform-style: preserve-3d;
}
 .about .container .img-container #card:hover {
     transform: rotateY(180deg);
}
 .about .container .img-container #card img {
     border: 1px solid #ecf0f1;
     padding: 5px;
     width: 100%;
     position: absolute;
     z-index: 10;
     border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
     left: 0;
     top: 50%;
     transform: translate(0%, -50%);
     z-index: 5;
     backface-visibility: hidden;
}
 .about .container .img-container #card .social {
     position: absolute;
     width: 100%;
     height: 100%;
     background: #fff;
     border-radius: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 3;
     transform: rotateY(180deg);
}
 .about .container .img-container #card .social ul li {
     padding-right: 20px;
     display: inline-block;
}
 .about .container .img-container #card .social ul li:last-child {
     padding-right: 0;
}
 .about .container .img-container #card .social ul li a {
     color: #053f5e;
     font-size: 2rem;
     transition: 0.5s;
}
 .about .container .img-container #card .social ul li a:hover {
     color: #95a5a6;
}
 .about .container .description {
     width: 65%;
}
 .about .container .description h2 {
     padding-bottom: 20px;
     font-size: 2rem;
}
 .about .container .description p {
     text-align: justify;
     font-size: 1.2rem;
     margin-bottom: 40px;
}
 .about .container .description a {
     padding: 10px 50px;
     border: 2px solid #ffd700;
     position: relative;
     color: #000;
     border-radius: 20px;
     font-size: 1rem;
}
 .about .container .description a::before {
     position: absolute;
     left: 0px;
     top: 0px;
     right: 0px;
     bottom: 0px;
     width: 0;
     content: "";
     height: 100%;
     background: #ffd700;
     transition: 0.5s;
     z-index: -10;
     border-radius: 18px;
}
 .about .container .description a:hover::before {
     width: 100%;
     border-radius: 18px;
}
 .mobile-menu {
     position: fixed;
     display: flex;
     z-index: -10;
     height: 100vh;
     top: 0;
     width: 100%;
}
 .mobile-menu div {
     width: 20%;
}
 .mobile-menu div div {
     width: 0%;
     height: 100vh;
     background: #022c43;
}
 .mobile-menu .menu-options {
     width: 100%;
     height: 100vh;
     display: flex;
     align-items: center;
     background: transparent;
     position: absolute;
     z-index: 100;
     display: none;
     overflow: auto;
}
 .mobile-menu .menu-options ul {
     width: 100%;
     text-align: center;
     padding-right: 40px;
     padding-left: 40px;
}
 .mobile-menu .menu-options ul li {
     padding-top: 20px;
     padding-bottom: 20px;
     font-size: 1.1rem;
     border-bottom: 1px solid #000;
}
 .mobile-menu .menu-options ul li a {
     color: #000;
}
 @media screen and (max-width: 768px) {
     .about .container {
         margin-top: 120px;
    }
     .about .container .img-container {
         width: 100%;
    }
     .about .container .img-container #card {
         margin: auto;
         transform-style: flat;
    }
     .about .container .img-container #card:hover {
         transform: none;
    }
     .about .container .description {
         width: 100%;
    }
}

<!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="css/styles.css">
    <link href="https://fonts.googleapis.com/css?family=Domine|Roboto&display=swap" rel="stylesheet">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/effects.js"></script>
    <script src="https://use.fontawesome.com/c3e042a20b.js"></script>
    <title>Document</title>
</head>
<body>
    <header>
        <div class="container">
            <a href="">Lorem, ipsum.</a>
            <input type="checkbox" id="menu">
            <label for="menu" id="open-menu"><i class="fas fa-bars"></i></label>
            <label for="menu" id="close-menu"><i class="fas fa-times"></i></label>
            <nav>
                <ul>
                    <li><a href="">Lorem ipsum</a></li>
                    <li><a href="">Lorem ipsum</a></li>
                    <li><a href="">Lorem ipsum</a></li>
                    <li><a href="">Lorem ipsum</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="about">
        <div class="mobile-menu" id="mobile-menu">
            <div class="menu-options" id="menu-options">
                <ul>
                    <li><a href="">Lorem, ipsum dolor.</a></li>
                    <li><a href="">Lorem, ipsum dolor.</a></li>
                    <li><a href="">Lorem, ipsum dolor.</a></li>
                    <li><a href="">Lorem, ipsum dolor.</a></li>
                </ul>
            </div>
            <div><div><a href=""></a></div></div>
            <div><div><a href=""></a></div></div>
            <div><div><a href=""></a></div></div>
            <div><div><a href=""></a></div></div>
            <div><div><a href=""></a></div></div>
        </div>
        <div class="container">
            <div class="img-container">
                <div id="card">
                    <img src="https://i.pinimg.com/736x/1d/1c/3d/1d1c3d3d35e2d14d2fdef598d572098e--men-haircuts--best-mens-haircuts.jpg" alt="" class="front">
                    <div class="social back">
                        <ul>
                            <li><a href="https://www.facebook.com/" target="_blank"><span><i class="fab fa-facebook-f"></i></span></a></li>
                            <li><a href="https://twitter.com/" target="_blank"><span><i class="fab fa-twitter"></i></span></a></li>
                            <li><a href="https://www.instagram.com/" target="_blank"><span><i class="fab fa-instagram"></i></span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="description">
                <h2 class="description-title">Lorem ipsum dolor.</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit autem deserunt numquam et reprehenderit, nobis eligendi asperiores quasi animi error eius nam sed aliquam dolorum adipisci incidunt ex assumenda nulla.Minus quae optio illo esse numquam perferendis aperiam veritatis unde repellendus dolorum non, architecto ipsum iusto eaque excepturi assumenda officiis aut ducimus quasi ab eum, ut nostrum rem obcaecati. Beatae.</p>
                <a href="" id="see-more">Ver mas</a>
            </div>
        </div>
    </section>

</body>
</html>

Я пытался избежать этого поведения с помощью jquery

 $(window).resize(function(){
      resize();
    })


    function resize(){
       $("body").css("transition", 0);
}

также пытался

$("body").css("transition", "none");
$("body").css("transition", "0s");

Но это не работает, как я могу решить это? Спасибо за вашу помощь

Answer 1

В CSS .about .container .img-container #card измените
transition: all 0.7s linear
на
transition: transform 0.7s linear

И удалите $("body").css("transition", "0s"); из своего JS, поскольку это бесполезно.
См. Фрагмент ниже:

$(document).ready(function() {
  menu();
  resize();
});

$(window).resize(function() {
  resize();
})



function menu() {
  $("#open-menu").click(function() {
    $("#mobile-menu div div").animate({
      "width": "100%"
    });
    $("#mobile-menu").css("z-index", "10");
    $("#menu-options").css("display", "flex");
  });


  $("#close-menu").click(function() {
    $("#mobile-menu div div").animate({
      "width": "0%"
    });
    $("#mobile-menu").css("z-index", "-10");
    $("#menu-options").css("display", "none");

  });
}



function resize() {
  var card = $("#card img").height();
  $("#card").css("height", card + "px");
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body .container {
  width: 90%;
  max-width: 1920px;
  margin: auto;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: Domine, serif;
}

body p,
body a {
  font-family: Roboto, sans-serif;
  text-decoration: none;
}

body ul {
  list-style: none;
}

header {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  padding-top: 30px;
  padding-bottom: 30px;
  background: #ffffff;
  z-index: 100;
  box-shadow: #ecf0f1 1px 0 3px;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .container a {
  font-size: 1.1rem;
  color: #000;
}

header .container input {
  display: none;
}

header .container #open-menu,
header .container #close-menu {
  display: none;
}

header .container nav ul li {
  display: inline-block;
  padding-right: 20px;
}

header .container nav ul li:last-child {
  padding-right: 0;
}

@media screen and (max-width: 768px) {
  header .container #open-menu {
    display: block;
  }
  header .container input:checked~#open-menu {
    display: none;
  }
  header .container input:checked~#close-menu {
    display: block;
  }
  header .container input:checked~.about {
    background: red;
  }
  header .container nav {
    display: none;
  }
}

.about {
  height: 100vh;
  position: relative;
  margin-top: 50px;
}

.about .container {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.about .container .img-container {
  width: 35%;
}

.about .container .img-container #card {
  position: relative;
  width: 80%;
  transition: transform 0.7s linear;
  transform-style: preserve-3d;
}

.about .container .img-container #card:hover {
  transform: rotateY(180deg);
}

.about .container .img-container #card img {
  border: 1px solid #ecf0f1;
  padding: 5px;
  width: 100%;
  position: absolute;
  z-index: 10;
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  left: 0;
  top: 50%;
  transform: translate(0%, -50%);
  z-index: 5;
  backface-visibility: hidden;
}

.about .container .img-container #card .social {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  transform: rotateY(180deg);
}

.about .container .img-container #card .social ul li {
  padding-right: 20px;
  display: inline-block;
}

.about .container .img-container #card .social ul li:last-child {
  padding-right: 0;
}

.about .container .img-container #card .social ul li a {
  color: #053f5e;
  font-size: 2rem;
  transition: 0.5s;
}

.about .container .img-container #card .social ul li a:hover {
  color: #95a5a6;
}

.about .container .description {
  width: 65%;
}

.about .container .description h2 {
  padding-bottom: 20px;
  font-size: 2rem;
}

.about .container .description p {
  text-align: justify;
  font-size: 1.2rem;
  margin-bottom: 40px;
}

.about .container .description a {
  padding: 10px 50px;
  border: 2px solid #ffd700;
  position: relative;
  color: #000;
  border-radius: 20px;
  font-size: 1rem;
}

.about .container .description a::before {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 0;
  content: "";
  height: 100%;
  background: #ffd700;
  transition: 0.5s;
  z-index: -10;
  border-radius: 18px;
}

.about .container .description a:hover::before {
  width: 100%;
  border-radius: 18px;
}

.mobile-menu {
  position: fixed;
  display: flex;
  z-index: -10;
  height: 100vh;
  top: 0;
  width: 100%;
}

.mobile-menu div {
  width: 20%;
}

.mobile-menu div div {
  width: 0%;
  height: 100vh;
  background: #022c43;
}

.mobile-menu .menu-options {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  background: transparent;
  position: absolute;
  z-index: 100;
  display: none;
  overflow: auto;
}

.mobile-menu .menu-options ul {
  width: 100%;
  text-align: center;
  padding-right: 40px;
  padding-left: 40px;
}

.mobile-menu .menu-options ul li {
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 1.1rem;
  border-bottom: 1px solid #000;
}

.mobile-menu .menu-options ul li a {
  color: #000;
}

@media screen and (max-width: 768px) {
  .about .container {
    margin-top: 120px;
  }
  .about .container .img-container {
    width: 100%;
  }
  .about .container .img-container #card {
    margin: auto;
    transform-style: flat;
  }
  .about .container .img-container #card:hover {
    transform: none;
  }
  .about .container .description {
    width: 100%;
  }
}

<!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="css/styles.css">
  <link href="https://fonts.googleapis.com/css?family=Domine|Roboto&display=swap" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/effects.js"></script>
  <script src="https://use.fontawesome.com/c3e042a20b.js"></script>
  <title>Document</title>
</head>

<body>
  <header>
    <div class="container">
      <a href="">Lorem, ipsum.</a>
      <input type="checkbox" id="menu">
      <label for="menu" id="open-menu"><i class="fas fa-bars"></i></label>
      <label for="menu" id="close-menu"><i class="fas fa-times"></i></label>
      <nav>
        <ul>
          <li><a href="">Lorem ipsum</a></li>
          <li><a href="">Lorem ipsum</a></li>
          <li><a href="">Lorem ipsum</a></li>
          <li><a href="">Lorem ipsum</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <section class="about">
    <div class="mobile-menu" id="mobile-menu">
      <div class="menu-options" id="menu-options">
        <ul>
          <li><a href="">Lorem, ipsum dolor.</a></li>
          <li><a href="">Lorem, ipsum dolor.</a></li>
          <li><a href="">Lorem, ipsum dolor.</a></li>
          <li><a href="">Lorem, ipsum dolor.</a></li>
        </ul>
      </div>
      <div>
        <div>
          <a href=""></a>
        </div>
      </div>
      <div>
        <div>
          <a href=""></a>
        </div>
      </div>
      <div>
        <div>
          <a href=""></a>
        </div>
      </div>
      <div>
        <div>
          <a href=""></a>
        </div>
      </div>
      <div>
        <div>
          <a href=""></a>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="img-container">
        <div id="card">
          <img src="https://i.pinimg.com/736x/1d/1c/3d/1d1c3d3d35e2d14d2fdef598d572098e--men-haircuts--best-mens-haircuts.jpg" alt="" class="front">
          <div class="social back">
            <ul>
              <li><a href="https://www.facebook.com/" target="_blank"><span><i class="fab fa-facebook-f"></i></span></a></li>
              <li><a href="https://twitter.com/" target="_blank"><span><i class="fab fa-twitter"></i></span></a></li>
              <li><a href="https://www.instagram.com/" target="_blank"><span><i class="fab fa-instagram"></i></span></a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="description">
        <h2 class="description-title">Lorem ipsum dolor.</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit autem deserunt numquam et reprehenderit, nobis eligendi asperiores quasi animi error eius nam sed aliquam dolorum adipisci incidunt ex assumenda nulla.Minus quae optio illo esse numquam
          perferendis aperiam veritatis unde repellendus dolorum non, architecto ipsum iusto eaque excepturi assumenda officiis aut ducimus quasi ab eum, ut nostrum rem obcaecati. Beatae.</p>
        <a href="" id="see-more">Ver mas</a>
      </div>
    </div>
  </section>

</body>

</html>