CODEWITHSUNDEEP
javascripthtmlcsscss-transitions
Adrian
Adrian

Reputation: 827

CSS transition doesn't work

My sidebar.css :

body
{
  margin: 0;
  padding: 0;
}
#header
{
  background-color: #577481;
  float: left;
  height: 50px;
  width: 100%;
}
#sidebar
{
  background-color: #4ea9d1;
  float: left;
  height: 100%;
  left: -200px;
  position: absolute;
  top: 50px;
  width: 200px;
}
#wrapper
{
  float: left;
  height: 100%;
  width: 100%;
}
#content
{
  background-color: #d6b141;
  float: left;
  height: 500px;
  width: 100%;
}
#sideBarButton
{
  background-image: url('SideBarButton.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70% 70%;
  border-radius: 25px;
  height: 50px;
  margin-left: 30px;
  width: 50px;
}

My index.html: 

<<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="sidebar.css">
    <script>
      function slideIn(element1, element2, element3) {
        var elem = document.getElementById(element1);
        var elem2 = document.getElementById(element2);
        var elem3 = document.getElementById(element3);
        elem.style.transition = "left 0.5s ease-in 0s";
        elem.style.left = "0px";
        elem2.style.transition = "marginLeft 0.5s ease-in 0s";
        elem2.style.marginLeft = "200px";
        elem2.style.opacity = 0.75;
        elem3.style.backgroundImage = 'url(SideBarButtonHover.png)';
        elem3.style.backgroundColor = '#3f545d';
      }

      function slideOut(element1, element2, element3) {
        var elem = document.getElementById(element1);
        var elem2 = document.getElementById(element2);
        var elem3 = document.getElementById(element3);
        elem.style.transition = "left 0.5s ease-out 0s";
        elem.style.left = "-200px";
        elem2.style.transition = "marginLeft 0.5s ease-out 0s";
        elem2.style.marginLeft = "0px";
        elem2.style.opacity = 1;
        elem3.style.backgroundImage = 'url(SideBarButton.png)';
        elem3.style.backgroundColor = '#577481';
      }
    </script>
  </head>

  <body>
    <div id="header">
      <div id="sideBarButton" onMouseOver="slideIn('sidebar', 'content', 'sideBarButton');" onMouseOut="slideOut('sidebar', 'content', 'sideBarButton');"></div>
    </div>
    <div id="wrapper">
      <div id="sidebar">
        <ul>
          <li><a href="#">Hallo</a>
          </li>
        </ul>
      </div>
      <div id="content">Ich bin der Content</div>
    </div>
  </body>

</html>

The transition with the first element(sidebar) works but not with the second one(content). It should work like this when you hover over the sidebarbutton, the sidebar will come out and the content will move at the same time to the right. My question is why doesn't the content transition work? Thanks for your help guys!

The transition with the first element(sidebar) works but not with the second one(content). It should work like this when you hover over the sidebarbutton, the sidebar will come out and the content will move at the same time to the right. My question is why doesn't the content transition work?

Thanks for your help guys!

Upvotes: 0

Views: 825

Answers (1)

rgthree
rgthree

Reputation: 7273

When setting a style value in javascript your style name should be camelCase'd, but if setting a value with a CSS property within it you should use the CSS property syntax. Correctly being:

elem2.style.transition = "margin-left 0.5s ease-in 0s";
elem2.style.marginLeft = "200px";

Upvotes: 2

Related Questions