在调整大小期间将过渡设置为无

时间：2019-12-23 02:23:15

标签： jquery css

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

我在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");

但是它不起作用，我该如何解决？ 谢谢您的帮助

1 个答案:

答案 0 :(得分：-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>

相关问题
最新问题