Question

I am attempting to get elements to transition onscreen. For example purposes I have set them to transition on page load.

The elements that are not floated work perfectly fine. However, the elements that have been floated right (They have the class exleft because they should be expanding leftward) do not transition.

Can someone explain why this is happening?

JsFiddle here

HTML:

<div id="templatebox">
  <div class="ribbon exright" id="r1">
  </div>
  <div class="ribbon exleft" id="r2">
  </div>
  <div class="ribbon exright" id="r3">
  </div>
  <div class="ribbon exleft" id="r4">
  </div>
</div>

CSS:

#templatebox{
  width: 100%;
  height: 800px;
  padding-top: 50px;
}
.ribbon{
  height: 50px;
  position: relative;
  transition: all 1s ease;
  width: 300px;
  margin-bottom: 20px;
  z-index: 1000;
}
.exleft{
  right: -1200px;
  left: 0px;
  margin-right: -100px;
  float: right;
}
.exright{
  left: -1200px;
  right: 0px;
  margin-left: -100px;
}

#r1{
  background-color: red;
}
#r2{
  background-color: green;
}
#r3{
  background-color: blue;
  top: 170px;
}
#r4{
  background-color: yellow;
  top: 170px;
}

JS:

var ribbons = document.getElementsByClassName("ribbon");
for(var i=0, j=ribbons.length; i<j; i++){
  ribbons[i].style.right = "0px";
  ribbons[i].style.left = "0px";
}

Answer 1

The floated ribbon has both a left and right attribute value set. If both attributes are set to a pixel value, only the left value will be used.

By setting

left: auto;

You can manipulate the right value and it will work as expected.

Here is an updated JSFiddle: https://jsfiddle.net/ym5p7y6v/

Elements Floated Right do not activate Transitions

1 个答案: