|
@@ -15,7 +15,9 @@
|
|
>
|
|
>
|
|
<div
|
|
<div
|
|
class="ZMbox"
|
|
class="ZMbox"
|
|
- :style="`width: ${pageWidth * pageNum}px; left:-${indexAc * pageWidth}px`"
|
|
|
|
|
|
+ :style="`width: ${pageWidth * pageNum}px;
|
|
|
|
+ transform: translateX(-${indexAc * pageWidth}px) translateZ(0)
|
|
|
|
+ `"
|
|
>
|
|
>
|
|
<div
|
|
<div
|
|
v-for="(item1, index1) in listArr"
|
|
v-for="(item1, index1) in listArr"
|
|
@@ -403,10 +405,18 @@ body {
|
|
height: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
position: relative;
|
|
position: relative;
|
|
|
|
+ left: 0;
|
|
|
|
+ top: 0;
|
|
display: flex;
|
|
display: flex;
|
|
background-image: url("../assets/images/fade-chapter-wood/bg-more-content.jpg");
|
|
background-image: url("../assets/images/fade-chapter-wood/bg-more-content.jpg");
|
|
background-size: contain;
|
|
background-size: contain;
|
|
- transition: left 0.8s;
|
|
|
|
|
|
+ transition: transform 1.2s;
|
|
|
|
+
|
|
|
|
+ -webkit-transform: translateZ(0);
|
|
|
|
+ -moz-transform: translateZ(0);
|
|
|
|
+ -ms-transform: translateZ(0);
|
|
|
|
+ -o-transform: translateZ(0);
|
|
|
|
+ transform: translateZ(0);
|
|
|
|
|
|
-webkit-backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
@@ -474,7 +484,7 @@ body {
|
|
position: absolute;
|
|
position: absolute;
|
|
bottom: 0;
|
|
bottom: 0;
|
|
height: 100%;
|
|
height: 100%;
|
|
- transition: transform 1s;
|
|
|
|
|
|
+ transition: transform 1.2s;
|
|
|
|
|
|
-webkit-transform: translateZ(0);
|
|
-webkit-transform: translateZ(0);
|
|
-moz-transform: translateZ(0);
|
|
-moz-transform: translateZ(0);
|