Next.js: 3 次卡片翻转但只有 1 次故障
Posted
技术标签:
【中文标题】Next.js: 3 次卡片翻转但只有 1 次故障【英文标题】：Next.js: 3 card flips but only 1 malfunctions 【发布时间】：2020-11-09 23:58:15 【问题描述】：只想快速感谢整个社区已经多次帮助我。你们都很慷慨，乐于助人。这也是我的第一篇文章，所以如果我忘记包含任何内容，我深表歉意。
我目前是一名自学成才的业余网络开发人员，正在尝试我的第一个真实项目。我正在使用 Next.js 并且喜欢服务器端渲染。到目前为止一切都很顺利，但是在测试响应性时，我注意到我正在使用的 3 张翻转卡中的 1 张显示其背面有点过早。此外，这种早期的背面显示仅在窗口宽度超过 1600 像素时才会出现，并且最容易在 Chrome 浏览器上复制。
其中最令人困惑的部分是，据我所知，我的所有 3 张翻转卡应该完全相同，但只有一张有问题。澄清一下，我在滑块组件中放置了一个翻转卡组件，因此有两个代码块
传入代码墙：
外部“滑块”组件
import React from 'react';
import SoloContent1 from './SoloContent1';
import SoloContent2 from './SoloContent2';
import SoloContent3 from './SoloContent3';
import CloseButton from './CloseButton';
export default class SliderSolo extends React.Component
constructor(props)
super(props);
this.state=
slide1: "slide1",
slide2: "slide2",
slide3: "slide3",
slideClass: "slide3",
this.slideLeft = this.slideLeft.bind(this);
this.slideRight = this.slideRight.bind(this);
;
slideRight()
if (this.state.slideClass === this.state.slide1)
this.setState( slideClass : this.state.slide2 )
else if (this.state.slideClass === this.state.slide2)
this.setState( slideClass : this.state.slide3 )
else if (this.state.slideClass === this.state.slide3)
this.setState( slideClass : this.state.slide1 )
slideLeft()
if (this.state.slideClass === this.state.slide1)
this.setState( slideClass : this.state.slide3 )
else if (this.state.slideClass === this.state.slide3)
this.setState( slideClass : this.state.slide2 )
else if (this.state.slideClass === this.state.slide2)
this.setState( slideClass : this.state.slide1 )
render()
if (this.props.show === true)
return (
<div className="slider">
<div className=this.state.slideClass >
<SoloContent1 />
<SoloContent2 />
<SoloContent3 />
</div>
<button id="goLeft" onClick=this.slideRight><i className="ChevronLeft" id="left"></i></button>
<button id="goRight" onClick=this.slideLeft><i className="ChevronRight" id="right"></i></button>
<a onClick=this.props.onClose id="closeLink"><CloseButton id="close" /></a>
<style jsx>
`
.ChevronLeft
position: absolute;
height: 75px;
width: 75px;
z-index: 10;
transform: rotate(90deg)
.ChevronRight
position: absolute;
height: 75px;
width: 75px;
z-index: 10;
transform: rotate(-90deg)
#left
right: 40px;
top: 0px;
#right
right: -40px;
top: -5px;
.ChevronLeft::before,
.ChevronLeft::after
position:absolute;
display:block;
content:"";
border:35px solid transparent;
.ChevronLeft::before
border-top-color:#b00;
.ChevronLeft::after
top:-10px;
border-top-color:#fff;
.ChevronRight::before,
.ChevronRight::after
position:absolute;
display:block;
content:"";
border:35px solid transparent;
.ChevronRight::before
border-top-color:#b00;
.ChevronRight::after
top:-10px;
border-top-color:#fff;
#closeLink
position: absolute;
width: 25px;
height: 25px;
cursor: pointer;
right: 6%;
top: 2%;
@media (max-width: 720px)
#closeLink
top: 45px;
right: 40px;
button
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 75px;
height: 75px;
background: none;
border: none;
cursor: pointer;
button:focus
outline: none;
box-shadow: none;
#goLeft
left: 5.5%;
#goRight
right: 5.5%;
.slider
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
display: flex;
align-items: center;
overflow: hidden;
margin-top: 130px;
min-width: 450px;
i
font-size: 2vw;
.slide1
position: relative;
width: 100%;
height: 60vh;
transition: 0.5s;
margin: auto;
@media (max-width: 720px)
.slide1
height: 75vh;
margin-top: 6%
.slide2
position: relative;
width: 100%;
height: 60vh;
transition: 0.5s;
margin: auto;
transform: translateX(100%)
@media (max-width: 720px)
.slide2
height: 75vh;
margin-top: 6%
.slide3
position: relative;
width: 100%;
height: 60vh;
transition: 0.5s;
margin: auto;
transform: translateX(200%)
@media (max-width: 720px)
.slide3
height: 75vh;
margin-top: 6%
`
</style>
</div>
); else
return null;
内部“翻牌”组件
import React from 'react';
class SoloContent1 extends React.Component
constructor(props)
super(props);
this.state=
className1: "flipCard",
className2: "flipCard",
className3: "flipCard",
this.flip1 = this.flip1.bind(this);
this.unflip1 = this.unflip1.bind(this);
this.flip2 = this.flip2.bind(this);
this.unflip2 = this.unflip2.bind(this);
this.flip3 = this.flip3.bind(this);
this.unflip3 = this.unflip3.bind(this);
flip1()
this.setState( className1 : "flipCard is-flipped" )
unflip1()
this.setState( className1 : "flipCard" )
flip2()
this.setState( className2 : "flipCard is-flipped" )
unflip2()
this.setState( className2 : "flipCard" )
flip3()
this.setState( className3 : "flipCard is-flipped" )
unflip3()
this.setState( className3 : "flipCard" )
render()
return (
<div id="contentContainer">
<div className="contentCanvas contentCanvas--card">
<div className="flipCardContainer" id="flipContainer1" onMouseEnter=this.flip1 onMouseLeave=this.unflip1>
<div className=this.state.className1 id="card1">
<div className="card__face card__face--front" id="soloPro1"
style=
backgroundImage: "url(" + `$require("../public/assets/img1.jpg")` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
>
</div>
<div className="card__face card__face--back" id="soloPro2">
<div style=
backgroundImage: "url(" + `$require("../public/assets/img1.jpg")` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundSize: "cover",
filter: "blur(8px)",
>
</div>
<p className="cardText">Card 1 Back</p>
</div>
</div>
</div>
<div className="flipCardContainer" id="flipContainer2" onMouseEnter=this.flip2 onMouseLeave=this.unflip2>
<div className=this.state.className2 id="card2">
<div className="card__face card__face--front" id="soloPro1"
style=
backgroundImage: "url(" + `$require("../public/assets/img2.jpg")` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
>
</div>
<div className="card__face card__face--back" id="soloPro2">
<div style=
backgroundImage: "url(" + `$require("../public/assets/img2.jpg")` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundSize: "cover",
filter: "blur(8px)",
>
</div>
<p className="cardText">Card 2 Back</p>
</div>
</div>
</div>
<div className="flipCardContainer" id="flipContainer3" onMouseEnter=this.flip3 onMouseLeave=this.unflip3>
<div className=this.state.className3 id="card3">
<div className="card__face card__face--front" id="soloPro1"
style=
backgroundImage: "url(" + `$require("../public/assets/img3.jpg")` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
>
</div>
<div className="card__face card__face--back" id="soloPro2">
<div style=
backgroundImage: "url(" + `$require("../public/assets/img3.jpg")` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundSize: "cover",
filter: "blur(8px)",
>
</div>
<p className="cardText">Card 3 Back</p>
</div>
</div>
</div>
</div>
<style jsx>
`
.cardText
position: absolute;
height: 100%;
width: 100%;
transform: translateY(-65%)
#contentContainer
position: absolute;
height: 100%;
width: 90%;
background-image: url('image');
background-color: rgb(192,192,192);
border-radius: 8px;
transform: translateX(0%);
right: 5%;
overflow: hidden;
border: 5px solid silver;
box-sizing: border-box;
@media (max-width: 720px)
#contentContainer
height: 100%;
min-height: 575px;
overflow: hidden;
.contentCanvas
z-index: 1;
height: 100%;
width: 100%;
margin: auto;
margin-top: 0%;
@media (max-width: 720px)
.contentCanvas
transform: translate(0, 0%);
min-height: 525px;
height: 102%;
width: 100%;
margin-top: 0%;
.flipCard
margin: auto;
list-style: none;
font-size: 1.6em;
width: 100%;
height: 100%;
padding: 0;
display: inline-block;
transition: transform 1s;
transform-style: preserve-3d;
position: relative;
cursor: pointer;
@media (max-width: 720px)
.flipCard
width: 100%;
height: 100%;
.card__face
position: absolute;
height: 100%;
width: 100%;
text-align: center;
.card__face--front
background: white;
.card__face--back
background: black;
transform: rotateY( 180deg );
.flipCard.is-flipped
transform: rotateY( 180deg );
@media (max-width: 720px)
.card__face--back
background: black;
transform: rotateX( 180deg );
.flipCard.is-flipped
transform: rotateX( 180deg );
#card1
@media (max-width: 720px)
#card2
margin-top: -1%
@media (max-width: 720px)
#card3
margin-top: -1%
.flipCardContainer
perspective: 40rem;
z-index: 1;
height: 100%;
width: 33.333333333333333333333333%;
margin: auto;
display: inline-block;
@media (max-width: 720px)
.flipCardContainer
width: 100%;
height: 33%;
margin-top: 0%;
`
</style>
</div>
);
export default SoloContent1;
我们不胜感激。也请不要害怕批评我的工作。毕竟这是我的第一个项目，我最不想做的就是继续养成坏习惯。提前谢谢大家。
【问题讨论】：
【参考方案1】：最后，我始终无法弄清楚是什么导致了问题。虽然我发现它直接与可视窗口的像素宽度相关联，无论元素嵌套在哪个容器中。此外，超过一定宽度后，问题开始在其他翻转卡片中弹出。
很抱歉，我无法提供真正的解决方案，但我确实设法通过使每张翻转卡片的背面在翻转时淡入来绕过它。
【讨论】：
以上是关于Next.js: 3 次卡片翻转但只有 1 次故障的主要内容，如果未能解决你的问题，请参考以下文章
“首次加载 JS”大小问题 Next.js。 （使用 immutable.js）
华为OD机试 - 旋转骰子（JavaScript） | 机试题+算法思路+考点+代码解析 2023