CSS or JavaScript for animation-CodePudding

I want to change my code so that the when my layout changes there is a sliding animation.

It is a 3 column layout and I want the left-most column to shrink a but when the user is focused on the right 2/3 of the screen.

I wrote a simple codepen demoing my code.

I am using JS to transition between two CSS classes, but I wanted to add an sliding transition to it.

I'm not sure if this should be 100% CSS or if I need to use some jQuery animation to get the desired effect.

Codepen: https://codepen.io/glennferrie/pen/vYaLpXo

HTML:

<div  >
    <div  id="leftpane">
        Left Pane Content  
    </div>
  <div  id="centerpane">
        Center Pane Content
    </div>
  <div  id="rightpane">
        Right Pane Content  
    </div>
</div>

CSS:

.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; }

JavaScript:

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();
});

CodePudding user response：

You can add transition: all 0.2s ease-in-out; CSS on the class .left-pane for making it smooth.

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  >
    <div  id="leftpane">
        Left Pane Content  
    </div>
  <div  id="centerpane">
        Center Pane Content
    </div>
  <div  id="rightpane">
        Right Pane Content  
    </div>
</div>

CodePudding user response：

You can achieve that by adding transition property for your .left-pane, .center-pane, .right-pane elements inside CSS. It is best to have it for all three panes as they all change their width on hover.

Here's an example:

.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;
}

As you can see I added 3 properties for the transition.

First is time which defines how long will your animation take to complete. Second is property you want to animate, in your case it's width and the last one is the interpolator, by default it is set to linear which might be something you want but you can change it, I set it to ease to make effect more pleasing to the eyes.

You can read more about transition to learn about all the possibilities in the docs.