es6封装类

class animate{
constructor(element,rate){
this.element=element
this.rate=rate||12;
}
getmessage(){
if((this.element.indexOf(".",0)!=-1&&this.element.indexOf(".",0)==0)){
var ele=window.document.querySelector(this.element);
console.log(this.element.indexOf(".",0))
console.log(this.element)
}
else{
var ele=window.document.getElementById(this.element);
console.log(this.element)

     }
      console.log(ele)
      let [width , height]=[ele.offsetWidth,ele.offsetHeight]
      return {document:ele,widths:width,heights:height}
   }
  wordsjob(){
            let num=this.getmessage();
            console.log(num)
           for(let  i =0;i<100;i++){
           let div=document.createElement("div")
           div.style.width=parseInt(num.widths)/10+"px";
           div.style.height=parseInt(num.heights)/10+'px';
           div.style.float="left";
           div.style.background="#ffffff";
               num.document.append(div);
           let hidden=1;
           let childs=num.document.children;
               let form=0;
               let timeovt=  setInterval(function () {
                   let optys=hidden;

                   while (optys<=0){
                       childs[form].style.opacity=(optys-=0.5);
                   }

                   childs[form].style.visibility="hidden";

                   form+=1;
                   if(form>= childs.length){
                       clearInterval(timeovt);
                       console.log("aaa")
                       num.document.remove();

                   }
                   return
               },this.rate)
       }
     }
  init(){

         this.wordsjob();
  }
  }

关于es6的类封装;
首先es5的原型链和es6的类的根本区别就是this的指向问题,对象中的函数this指向是window,但是es6类解决了这个问题 里面的this指向永远都是这个类对象 而且包括继承 方法的重写都很方便,如果重写方法类名。prototype.方法名 如果继承类属性 则 class 类名 extends 父类名constructor中写 子类添加属性,super()中写父类继承属性
这个是一个把所引入元素切割100份渐变显示的动画封装类

你可能感兴趣的:(web,简单es6动画封装,类简单用法)