A Pen by hidoos.

A-Pen-by-hidoos.markdown

A Pen by hidoos

A Pen by hidoos on CodePen.

License.

index.html

<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<h3>pure javascript</h3>
<div class="box"></div>
<button class="togglebtn">play</button>

<h3> jquery transition </h3>
<div class="box"></div>
<button class="togglebtn">play</button>

script.js

/* native js control transtion */
var doc = document,
    win = window;
var elBoxs = doc.getElementsByClassName('box'),
    toggleBtns = doc.getElementsByClassName('togglebtn');
console.log(toggleBtns[0]);

var $elboxTwo = $('div:eq(1)'),
    $toggleBtnTwo = $('.togglebtn:eq(1)');
/**
 * prue js controls transition
 */
toggleBtns[0].onclick = function(){
  if(this.innerHTML === "play"){
    this.innerHTML = "pause";
    elBoxs[0].classList.add("horizTranslate");
  }else{
    this.innerHTML = "play";
    var computedStyle = win.getComputedStyle(elBoxs[0]);
    var elBoxsMarginleft = computedStyle.getPropertyValue('margin-left');
    elBoxs[0].style.marginLeft = elBoxsMarginleft;
    elBoxs[0].classList.remove("horizTranslate");
  }
}

/**
 * jquery controls transttion
 */
$toggleBtnTwo.on('click',function(e){
  console.log('cshi');
  if($(this).html() === "play"){
    $(this).html('pause');
    $elboxTwo.addClass('horizTranslate');
  }else{
    $(this).html('play');
    var marginleft = $elboxTwo.css('margin-left');
    console.log(marginleft);
    $elboxTwo.css('margin-left',marginleft);
    $elboxTwo.removeClass('horizTranslate');
  }
});

style.css

.box{
  height:80px;
  width:80px;
  margin-left:10px;
  background:blue;
  position:relative;
}

.togglebtn{
  margin:10px;
  padding:4px 10px;
}

.horizTranslate{
  -webkit-transition:3s;
  transtion:3s;
  margin-left:50%!important;
}

在写这个列子的时候，好多次都拼写错了！注意不要拼写错误代码。