jquery - 在调整大小期间将过渡设置为无
问题描述
我试图在调整大小期间停用所有转换。因为当我调整屏幕大小时，卡片和其他元素缓慢移动到新位置，看起来真的很糟糕
我在 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");
但它不起作用，我该如何解决这个问题？谢谢你的帮助
解决方案
在 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>推荐阅读
- timescaledb - 在窗口中的 postgres db 中添加 Timescaledb 扩展找不到 timescaledb.control 错误
- excel - 使用变量命名类对象（Excel VBA）
- cordova - 2020 年如何在 Cordova 上集成 Admob 广告？
- linux - 排序 data.txt | 有什么区别？uniq -q 和只是 'uniq -q'？
- python - 是否可以以矢量化方式避免 igraph 的返回边缘？
- oracle - 如何在 oracle 中使用 `dbms_java.loadjava` 从远程系统上传 jar
- sql-server - 将记录插入到散列 ID 的表中？
- php - Laravel：更新模型和相关模型
- python - 使用 Django 模型对象在生成器中进行延迟评估
- android - 如何从服务器获取图标并将它们存储在android应用程序中