CSS 或 JavaScript 为 animation

Question

我想更改我的代码，以便在我的布局更改时出现滑动 animation。

这是一个 3 列布局，我希望最左边的列缩小，但是当用户关注屏幕的右侧 2/3 时。

我写了一个简单的代码笔来演示我的代码。

我正在使用 JS 在两个 CSS 类之间进行转换，但我想为其添加一个滑动转换。

我不确定这是否应该是 100% CSS 或者我是否需要使用一些 jQuery animation 来获得预期的效果。

代码笔： https://codepen.io/glennferrie/pen/vYaLpXo

 const leftPane = document.getElementById('leftpane'); const centerPane = document.getElementById('centerpane'); const rightPane = document.getElementById('rightpane'); var addMode2 = function() { leftPane.classList.add("mode-2"); rightPane.classList.add("mode-2"); centerPane.classList.add("mode-2"); } var removeMode2 = function() { leftPane.classList.remove("mode-2"); rightPane.classList.remove("mode-2"); centerPane.classList.remove("mode-2"); } leftPane.addEventListener("mouseover", function(ev) { removeMode2(); }); centerPane.addEventListener("mouseover", function(ev) { addMode2(); }); rightPane.addEventListener("mouseover", function(ev) { addMode2(); });

 .container { background-color: lightblue; font-family: sans-serif; font-size: 1.1em; }.left-pane, .center-pane, .right-pane { padding-block-start: 10vh; display: inline-block; outline: dotted 2px #333; height: 95vh; text-align: center; }.left-pane { width: 25vw; background-color: yellow; }.center-pane { width: 40vw; }.right-pane { width: 33vw; background-color: aquamarine; }.left-pane.mode-2 { width: 10vw; }.center-pane.mode-2 { width: 47vw; }.right-pane.mode-2 { width: 40vw; }

 <div class="container"> <div class="left-pane" id="leftpane"> Left Pane Content </div> <div class="center-pane" id="centerpane"> Center Pane Content </div> <div class="right-pane" id="rightpane"> Right Pane Content </div> </div>

Answer 1

您可以通过为 CSS 中的.left-pane, .center-pane, .right-pane元素添加transition属性来实现这一点。最好为所有三个窗格都添加它，因为它们都会在 hover 上更改其宽度。

这是一个例子：

.left-pane, .center-pane, .right-pane {
  padding-block-start: 10vh;
  display: inline-block;
  outline: dotted 2px #333;
  height: 95vh;
  text-align: center;
  /*  Transition for the width  */
  transition: 250ms width ease;
}

如您所见，我为transition添加了 3 个属性。

首先是时间，它定义了您的 animation 需要多长时间才能完成。 第二个是你想要动画的属性，在你的情况下它是width ，最后一个是插值器，默认情况下它设置为线性这可能是你想要的但你可以改变它，我将它设置为ease以使效果更令人愉悦到眼睛。

您可以阅读有关transition的更多信息，以了解文档中的所有可能性。

Answer 2

您可以添加transition: all 0.2s ease-in-out; class .left-pane上的 CSS 使其平滑。

 const leftPane = document.getElementById('leftpane'); const centerPane = document.getElementById('centerpane'); const rightPane = document.getElementById('rightpane'); var addMode2 = function () { leftPane.classList.add("mode-2"); rightPane.classList.add("mode-2"); centerPane.classList.add("mode-2"); } var removeMode2 = function () { leftPane.classList.remove("mode-2"); rightPane.classList.remove("mode-2"); centerPane.classList.remove("mode-2"); } leftPane.addEventListener("mouseover", function (ev) { removeMode2(); }); centerPane.addEventListener("mouseover", function (ev) { addMode2(); }); rightPane.addEventListener("mouseover", function (ev) { addMode2(); });

 .container { background-color: lightblue; font-family: sans-serif; font-size: 1.1em; }.left-pane, .center-pane, .right-pane { padding-block-start: 10vh; display: inline-block; outline: dotted 2px #333; height: 95vh; text-align: center; }.left-pane { width: 25vw; background-color: yellow; transition: all 0.2s ease-in-out; }.center-pane { width: 40vw; }.right-pane { width: 33vw; background-color: aquamarine; }.left-pane.mode-2 { width: 10vw; }.center-pane.mode-2 { width: 47vw; }.right-pane.mode-2 { width: 40vw; }

 <div class="container" > <div class="left-pane" id="leftpane"> Left Pane Content </div> <div class="center-pane" id="centerpane"> Center Pane Content </div> <div class="right-pane" id="rightpane"> Right Pane Content </div> </div>

Answer 3

您可以使用grid并设置列宽的动画。 下面的解决方案使用了Firefox 尚不支持的has()伪代码。

 * { box-sizing: border-box; }.container { background-color: lightblue; font-family: sans-serif; font-size: 1.1em; display: grid; /* Default setting equal width for all columns */ grid-template-columns: 2fr 2fr 2fr; transition: grid-template-columns 0.5s ease-in-out; }.left-pane, .center-pane, .right-pane { outline: dotted 2px #333; height: 95vh; text-align: center; }.left-pane { background-color: yellow; }.right-pane { background-color: aquamarine; } /* When center pane is hovered, adjust the width of the columns of the parent */.container:has(.center-pane:hover) { grid-template-columns: 1fr 2.5fr 2.5fr; }

 <div class="container"> <div class="left-pane" id="leftpane"> Left Pane Content </div> <div class="center-pane" id="centerpane"> Center Pane Content </div> <div class="right-pane" id="rightpane"> Right Pane Content </div> </div>