在调整大小时设置为无过渡

Question

我正在尝试在调整大小时停用所有转换。原因是当我调整屏幕大小时，卡片和其他元素缓慢移动到它们的新位置，看起来真的很糟糕

我在sass中获得了此CSS代码

$(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

并从JS中删除$("body").css("transition", "0s");，因为它没有用。请参见下面的代码段：

$(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>