JSFiddle - React, Tailwind, and code Playground

by dtdxrk

HTML

<input type="button" value="渐隐" onclick="Animation.alpha(_CalF.$('#content'),0);" />
  <input type="button" value="渐显" onclick="Animation.alpha(_CalF.$('#content'),100);" />
  <input type="button" value="位置移动" onclick="Animation.move(_CalF.$('#content'),{x:1000,y:500},Tween.Cubic.easeIn);" />
  <input type="button" value="位置移动2" onclick="Animation.move(_CalF.$('#content'),{x:100,y:100},Tween.Cubic.easeOuth);" />
  <input type="button" value="变大" onclick="Animation.size(_CalF.$('#content'),{w:500,h:500},Tween.Cubic.easeIn);" />
  <input type="button" value="缩小" onclick="Animation.size(_CalF.$('#content'),{w:100,h:100},Tween.Cubic.easeOuth);" />
  <input type="button" value="综合动画" onclick="Animation.alpha(_CalF.$('#content'),0);Animation.move(_CalF.$('#content'),{x:1000,y:500},Tween.Cubic.easeIn);Animation.size(_CalF.$('#content'),{w:500,h:500},Tween.Cubic.easeOuth);" />
  <input type="button" value="综合动画2" onclick="Animation.alpha(_CalF.$('#content'),100);Animation.move(_CalF.$('#content'),{x:200,y:200},Tween.Cubic.easeIn);Animation.size(_CalF.$('#content'),{w:200,h:200},Tween.Cubic.easeOuth);" />
 <div id="content">
     <h1>动画类</h1>
 </div>

CSS

*{margin: 0;padding: 0}
      input {padding: 5px 10px;}

      #content{margin:10px;width:100px;height:100px;border: 5px solid #666;text-align: center; opacity: 1; filter: alpha(opacity=100);}
      #content h1{background-color: #666;color: #fff;text-align: center;margin:10px;}

JavaScript

var _CalF = {
   $ : function(object){//选择器
     if(object === undefined ) return;
     var getArr = function(name,tagName,attr){
           var tagName = tagName || '*',
               eles = document.getElementsByTagName(tagName),
               clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6
               attr = attr || clas,
               Arr = [];
           for(var i=0;i<eles.length;i++){
             if(eles[i].getAttribute(attr)==name){
               Arr.push(eles[i]);
             }
           }
           return Arr;
         };
   
     if(object.indexOf('#') === 0){  //#id 
       return document.getElementById(object.substring(1));
     }else if(object.indexOf('.') === 0){  //.class
       return getArr(object.substring(1));
     }else if(object.match(/=/g)){  //attr=name
       return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g)));
     }else if(object.match(/./g)){ //tagName.className
       return getArr(object.split('.')[1],object.split('.')[0]);
     }
   },
   getPosition : function(obj) { //获取元素在页面里的位置和宽高
      var top = 0,
          left = 0,
          width = obj.offsetWidth,
          height = obj.offsetHeight;
  
      while(obj.offsetParent){
          top += obj.offsetTop;
          left += obj.offsetLeft;
          obj = obj.offsetParent;
      }
  
      return {"top":top,"left":left,"width":width,"height":height};
   }
 };


/*
t:currentCount 当前执行第t次
b:initPos 初始值
c:targetPos - initPos 发生偏移的距离值
d:count 一共执行d次
效果：http://www.robertpenner.com/easing/easing_demo.html 
*/

var Tween = {
    Linear: function(initPos, targetPos, currentCount, count) {
        var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
        return c * t / d + b;
    },
    Quad: {
        easeIn: function(initPos, targetPos, currentCount, count) {
            var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
            return c * (t...