设置完成转换所需的时间

Question

我对transition属性的工作方式感到困惑。

过渡时间是指实际时间吗？

例如：

.panel-left,
.panel-right {
transition: all ease 30s;
]

你点击播放图像，两边打开。

为什么两边在不到30秒内打开？

我会使用不同的转换属性来执行此操作吗？

会用不同的方式吗？

代码https://jsfiddle.net/bfjcn4xk/

css属性是什么来设置两边完全打开所需的时间？

(function iife() {
"use strict";
function show(el) {

el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
const thewrap = curtain.parentElement.querySelector(".container");
show(thewrap);
}
const cover = document.querySelector(".jacketa");
cover.addEventListener("click", coverClickHandler);
}());

html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #353198;
}
.curtain {
position: relative;
width: 100%;
height: 100%;
}
.curtain.slide {
height: auto;
min-height: 100%;
overflow: hidden;
}
.panel-left,
.panel-right {
position: absolute;
height: 100%;
width: 50%;
top: 0%;
transition: all ease 30s;
/*background-image: url("https://picsum.photos/600");
background-size: cover;
background-repeat: no-repeat;
background-position: center;*/
overflow: hidden;
}
.panel-left {
left: 0;
/*background-color: rgb(91, 96, 106);*/
}
.panel-right {
right: 0;
/*background-color: rgb(229, 211, 211);*/
}
.panel-left::before,
.panel-right::before {
content: "";
position: absolute;
height: 100%;
width: 200%;
top: 0;
left: 0;
background-image: url("https://picsum.photos/1920/1080");
background-size: auto;
background-repeat: no-repeat;
background-position: 0 0;
}
.panel-right::before {
left: -100%;
}
.curtain.slide .panel-left {
transform: translateX(-100vw);
}
.curtain.slide .panel-right {
transform: translateX(100vw);
}

.outer {
display: table;
height: 100%;
margin: 0 auto;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.jacketa {
position: absolute;
width: 180px;
height: 180px;
cursor: pointer;
border-radius: 50%;
background: #130e85;
border: 3px solid #f91f6e;
box-sizing: border-box;
display: block !important;
}

.jacketa .coversvg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
cursor: pointer;
}
.jacketa .coversvg {
width: 70px;
height: 75.4px;
fill: none;
stroke-width: 4px;
stroke-miterlimit: 10;
}
.jacketa .coversvg .back {
stroke: #000;
opacity: 0.15;
}
.jacketa .coversvg .front {
stroke: #08f9ff;
stroke-dasharray: 150;
stroke-dashoffset: 1500;
animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}
@keyframes draw {
100% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes flicker-1 {
0%,
100% {
opacity: 1;
}
41.99% {
opacity: 1;
}
42% {
opacity: 0;
}
43% {
opacity: 0;
}
43.01% {
opacity: 1;
}
47.99% {
opacity: 1;
}
48% {
opacity: 0;
}
49% {
opacity: 0;
}
49.01% {
opacity: 1;
}
}
.split-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 180px;
height: 180px;
margin: auto;
border-radius: 50%;
box-shadow: 0 0 20px 2px #f9066bf7;
transition: 5s ease;
}
.j1 {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 5s ease;
}
.j2 {
position: absolute;
left: 50%;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 5s ease;
}

.j2 .jacketa {
right: 0;
left: auto;
}
.curtain.slide .split-wrap {
box-shadow: 0 0 20px 2px rgba(249, 6, 167, 0);
}

.container {
height: auto;
}
.curtain.slide .j1 {
transform: translateX(-100vw);
}
.curtain.slide .j2 {
transform: translateX(100vw);
}
.container {
width: 990px;
height: 1530px;
margin: 100px auto;
padding: 25px;
overflow: hidden;
border-radius: 25px;
border: 2px solid #0059dd;
box-sizing: border-box;
background: #000000;
}
.container-top {
position: relative;
height: 310px;
margin: 0 0 45px 0;
border-radius: 25px;
border: 3px solid #0059dd;
box-sizing: border-box;
background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
background-size: cover;
}
.hide {
display: none;
}

<div class="curtain">
<div class="outer">
<div class="tcell">
<div class="container hide">
<div class="container-top">
</div>
</div>
<div class="panel-left"> </div>
<div class="panel-right"> </div>
<div class="split-wrap">
<div class="j1">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
<div class="j2">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>

</div>
</div>
</div>
</div>
</div>

Answer 1

两个面板的宽度各为50%。但是为了打开它们，CSS将它们分别翻译为-100vw和100vw。

因此，基本上，它们比需要的向左和向右移动得更远——在过渡时间到来之前，它们就已经从视野中消失了。

尝试这个实验：将其中一个面板的平移更改为100%，这意味着它的宽度为100%，而不是容器或视口的宽度。你会看到右侧面板的移动速度大约是左侧面板的一半，需要30秒才能离开视野。

.curtain.slide .panel-left {
transform: translateX(-100vw);
}
.curtain.slide .panel-right {
transform: translateX(100%);/* CHANGED */
}

我不知道为什么代码会被写成用100vw术语翻译——"通常"我会把一个元素翻译成它的全宽(100%(，以使它不在视野中。很明显，过渡时间是元素消失所需的时间。因此，要么将HTML更改为如上所述，要么减少转换时间。