Incorporating HTML5 transitions into your website

Question

Incorporating HTML5 transitions into your website

After researching HTML5 transitions and adapting some examples, I finally achieved the desired effect.

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
          width: 50px;
          height: 50px;
        }

        div.myDiv {
          position: absolute;
          -webkit-transition-property: top, opacity;
          -webkit-transition-duration: 1s, 1s;
          -webkit-transition-timing-function:ease-in-out, ease-in-out;

          -moz-transition-property: top, opacity;
          -moz-transition-duration: 1s, 1s;
          -moz-transition-timing-function:ease-in-out, ease-in-out;

          -o-transition-property: top, opacity;
          -o-transition-duration: 1s, 1s;
          -o-transition-timing-function:ease-in-out, ease-in-out;

          transition-property: top, opacity;
          transition-duration: 1s, 1s;
          transition-timing-function:ease-in-out, ease-in-out;
        }
        #one {
          top: 0px;
          background-color: blue;
          opacity: 1;
        }

        #two {
          top: 50px;
          background-color: green;
          opacity: 0;
        }

        #three {
          top: 100px;
          background-color: red;
          opacity: 0;
        }

        #container {
          width: 50px;
          height: 150px;
          position: relative;
          overflow:hidden;
        }
    </style>
    <script>

    function one() {
      document.getElementById('one').style.top = "0px";
      document.getElementById('two').style.top = "50px";
      document.getElementById('three').style.top = "100px";

      document.getElementById('one').style.opacity = "1";
      document.getElementById('two').style.opacity = "0";
      document.getElementById('three').style.opacity = "0";
    }
    function two() {
      document.getElementById('one').style.top = "-50px";
      document.getElementById('two').style.top = "0px";
      document.getElementById('three').style.top = "50px";

      document.getElementById('one').style.opacity = "0";
      document.getElementById('two').style.opacity = "1";
      document.getElementById('three').style.opacity = "0";
    }

    function three() {
      document.getElementById('one').style.top = "-100px";
      document.getElementById('two').style.top = "-50px";
      document.getElementById('three').style.top = "0px";

      document.getElementById('one').style.opacity = "0";
      document.getElementById('two').style.opacity = "0";
      document.getElementById('three').style.opacity = "1";
    }
    </script>
</head>
<body>
<div id='container'>
    <div class="myDiv" id='one'>
    </div>
    <div class="myDiv" id='two'>
    </div>
    <div class="myDiv" id='three'>
    </div>
</div>
<input type='button' onclick='one();' value='one!'></input>
<input type='button' onclick='two();' value='two!'></input>
<input type='button' onclick='three();' value='three!'></input>
</body>
</html>

I came across advice that it's not recommended to change CSS properties with JavaScript. It's considered a bad practice. Is there a more elegant and effective way to achieve this?

Any idea? (fiddle here)

javascript html css css-transitions

Answer 1

Answer №1

I don't think it's necessarily a bad practice to modify CSS properties using JavaScript. However, if there is a chance that some users might have JavaScript disabled, it may be wise to avoid changing fundamental site properties in this way.

You can refactor your JavaScript code as shown below, providing the added benefit of easily adding or removing boxes (view example fiddle here):

// Define different colored boxes
var boxes = ['blue', 'green', 'red'];
var height = 50;

// All boxes will be placed within a single moving div for easier management
var slider = document.getElementById('slider');
var div;

for (var i = 0; i < boxes.length; i ++) {

  // Create a box element for each color
  div = document.createElement('div');

  div.setAttribute('id', 'box_' + i);
  div.setAttribute('class', 'myDiv');

  div.style.background = boxes[i];
  div.style.top = (i * height) + "px";
  div.style.opacity = (i == 0) ? 1 : 0;

  // Add the box to the slider div
  slider.appendChild(div);
}

function slide(index) {

  // Move the slider to display the selected box
  var top = (index * height) * -1;

  document.getElementById('slider').style.top = top + 'px';
  toggleVisible(document.getElementById('box_' + index));
}

// Hide non-selected boxes and show the selected one
function toggleVisible(show) { 

  var div;

  for (var i = 0; i < boxes.length; i ++) {
    div = document.getElementById('box_' + i);
    div.style.opacity = (div === show) ? 1 : 0;
  }
}

HTML:

<div id='container'>
  <div id='slider'></div>
</div>

<input type='button' onclick='slide(0);' value='one!'></input>
<input type='button' onclick='slide(1);' value='two!'></input>
<input type='button' onclick='slide(2);' value='three!'></input>

CSS:

div {
  width: 50px;
  height: 50px;
}

div.myDiv {
  position: absolute;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 1s, 1s;
  -webkit-transition-timing-function:ease-in-out, ease-in-out;

  -moz-transition-property: opacity;
  -moz-transition-duration: 1s, 1s;
  -moz-transition-timing-function:ease-in-out, ease-in-out;

  -o-transition-property: opacity;
  -o-transition-duration: 1s, 1s;
  -o-transition-timing-function:ease-in-out, ease-in-out;

  transition-property: opacity;
  transition-duration: 1s, 1s;
  transition-timing-function:ease-in-out, ease-in-out;
}

#container {
  width: 50px;
  height: 150px;
  position: relative;
  overflow:hidden;
}

#slider { 
  position: absolute;
  -webkit-transition-property: top;
  -webkit-transition-duration: 1s, 1s;
  -webkit-transition-timing-function:ease-in-out, ease-in-out;

  -moz-transition-property: top;
  -moz-transition-duration: 1s, 1s;
  -moz-transition-timing-function:ease-in-out, ease-in-out;

  -o-transition-property: top;
  -o-transition-duration: 1s, 1s;
  -o-transition-timing-function:ease-in-out, ease-in-out;

  transition-property: top;
  transition-duration: 1s, 1s;
  transition-timing-function:ease-in-out, ease-in-out;
}

Answer 2

I don't think it's necessarily a bad practice to modify CSS properties using JavaScript. However, if there is a chance that some users might have JavaScript disabled, it may be wise to avoid changing fundamental site properties in this way.

You can refactor your JavaScript code as shown below, providing the added benefit of easily adding or removing boxes (view example fiddle here):

// Define different colored boxes
var boxes = ['blue', 'green', 'red'];
var height = 50;

// All boxes will be placed within a single moving div for easier management
var slider = document.getElementById('slider');
var div;

for (var i = 0; i < boxes.length; i ++) {

  // Create a box element for each color
  div = document.createElement('div');

  div.setAttribute('id', 'box_' + i);
  div.setAttribute('class', 'myDiv');

  div.style.background = boxes[i];
  div.style.top = (i * height) + "px";
  div.style.opacity = (i == 0) ? 1 : 0;

  // Add the box to the slider div
  slider.appendChild(div);
}

function slide(index) {

  // Move the slider to display the selected box
  var top = (index * height) * -1;

  document.getElementById('slider').style.top = top + 'px';
  toggleVisible(document.getElementById('box_' + index));
}

// Hide non-selected boxes and show the selected one
function toggleVisible(show) { 

  var div;

  for (var i = 0; i < boxes.length; i ++) {
    div = document.getElementById('box_' + i);
    div.style.opacity = (div === show) ? 1 : 0;
  }
}

HTML:

<div id='container'>
  <div id='slider'></div>
</div>

<input type='button' onclick='slide(0);' value='one!'></input>
<input type='button' onclick='slide(1);' value='two!'></input>
<input type='button' onclick='slide(2);' value='three!'></input>

CSS:

div {
  width: 50px;
  height: 50px;
}

div.myDiv {
  position: absolute;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 1s, 1s;
  -webkit-transition-timing-function:ease-in-out, ease-in-out;

  -moz-transition-property: opacity;
  -moz-transition-duration: 1s, 1s;
  -moz-transition-timing-function:ease-in-out, ease-in-out;

  -o-transition-property: opacity;
  -o-transition-duration: 1s, 1s;
  -o-transition-timing-function:ease-in-out, ease-in-out;

  transition-property: opacity;
  transition-duration: 1s, 1s;
  transition-timing-function:ease-in-out, ease-in-out;
}

#container {
  width: 50px;
  height: 150px;
  position: relative;
  overflow:hidden;
}

#slider { 
  position: absolute;
  -webkit-transition-property: top;
  -webkit-transition-duration: 1s, 1s;
  -webkit-transition-timing-function:ease-in-out, ease-in-out;

  -moz-transition-property: top;
  -moz-transition-duration: 1s, 1s;
  -moz-transition-timing-function:ease-in-out, ease-in-out;

  -o-transition-property: top;
  -o-transition-duration: 1s, 1s;
  -o-transition-timing-function:ease-in-out, ease-in-out;

  transition-property: top;
  transition-duration: 1s, 1s;
  transition-timing-function:ease-in-out, ease-in-out;
}

Incorporating HTML5 transitions into your website

Answer №1

Similar questions

Position the input alongside the icon

What does "cascading" refer to in the context of Cascading Style Sheets?

When the resolution changes, the text shifts away from the bar in CSS

.parseXML yields no results

Using multiple MaterialUI components in a JavaScript page with React can pose challenges

"Exploring the challenges of implementing a jquerytools tooltip with AJAX

Enforcing character limits in summernote

Contrasting behavior in JavaScript experienced in development versus production environments

Having trouble getting a Bootstrap 4 modal to load properly when triggered by a hyperlink

What is the method for dynamically updating and showcasing a JSON file upon the click of a button?

Stopping Form Submission with MUI TextField

Securing your Node.js connect-rest REST API with OAuth: A comprehensive guide

html - generating a block of code

Tips for transferring data from Express to .ejs file during redirection in Node.js

Modifying the CSS class depending on the percentage value

Utilizing arrays in JavaScript alongside jQuery's methods such as $.inArray() and .splice()

Leveraging jQuery to dynamically load an icon based on the content within a <label> tag

(Monetate) Resolving the issue of delayed transition between the <a> element and CSS arrow in the breadcrumb menu utilizing HTML/CSS/jQuery

Cease the execution of processes once a Promise has been rejected

Encountering error ORA-12514 when utilizing the node oracle-db npm package