99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

props: {
 // 時(shí)間間隔
 interval: {
  type: Number,
  default: 8000
 },
 //是否自動(dòng)播放
 autoplay: {
  type: Boolean,
  default: true
 },
 zIndex: {
  type: Number,
  default: 2000
 },
 // x軸變化
 axisx: {
  type: Number,
  default: 1000
 }
},
watch: {
 autoplay(val) {
  val ? this.startTimer() : this.stopTimer();
 }
},
data() {
 return {
  // 計(jì)時(shí)器
  timer: "",
  //子元素
  items: [],
  // 當(dāng)前顯示的元素
  active: 0
 };
},

js核心部分

created() {
 //元素創(chuàng)建和需要更新父元素屬性
 this.$parent && this.$parent.updateItems();
},
beforeMount() {},
mounted() {},
destroyed() {
 //元素銷毀和需要更新父元素屬性
 this.$parent && this.$parent.updateItems();
},

這里主要是創(chuàng)建元素的時(shí)候需要把元素加入主組件的items中，銷毀的時(shí)候同樣進(jìn)行更新

主組件的更新代碼

// 更新元素
updateItems() {
 this.items = this.$children.filter(
  // 更新元素需要確認(rèn)為指定的子元素
  child => child.$options.name === "dhtSwiperSideItem"
 );
},

css核心部分

css部分主要是定義動(dòng)畫效果，和基礎(chǔ)css，主要是看動(dòng)畫部分

.dht-swiper-side-item {
 position: absolute;
 transition: all 1s ease;
 transform: translateX(1000px);
 // 抖動(dòng)動(dòng)畫
 @keyframes mymove {
  0% {
   left: 0;
  }
  50% {
   left: 15px;
  }
  100% {
   left: 0;
  }
 }
}

3、一般彈窗動(dòng)畫之類的編寫原理講解

1、不能用display：none，因?yàn)槟菢釉厥侵苯语@示出來(lái)的，動(dòng)畫是無(wú)法有的。

2、舉例：下方彈窗劃出

其實(shí)在寫這些彈窗的時(shí)候元素已經(jīng)在頁(yè)面上面加載好了，只是被我們隱藏到顯示器之外了。

所以我們要做的是在點(diǎn)擊顯示的時(shí)候把元素位移回來(lái)

3、所以其實(shí)頁(yè)面上基本的動(dòng)畫都是先放在你看不到的地方，然后再通過(guò) transform

形變css給移動(dòng)回來(lái)的。我這次的組件也是一樣的。

4、主組件操作

1、回顧一下，剛才我們先寫了主組件，主組件加載子組件，子組件會(huì)調(diào)用主組件函數(shù)，讓主組件去更新自己的items，提前存好。方便使用

2、既然我們主組件拿到了子組件了，那么就可以直接操作子組件進(jìn)行操作，其實(shí)核心原理在于主組件之間操作子組件。（我看了elementUI源碼的走馬燈部分，寫的比我復(fù)雜。）

3、定時(shí)器部分

//開始計(jì)時(shí)器
startTimer() {
 //預(yù)先執(zhí)行一次，保證不會(huì)出現(xiàn)第一次運(yùn)行延遲雙倍實(shí)際
 this.play();
 // 攔截處理
 if (this.interval <= 0 || !this.autoplay || this.timer) return;
 this.timer = setInterval(() => {
  this.play();
 }, this.interval);
},

這塊其實(shí)沒(méi)啥，除了預(yù)先的攔截剩下的就是啟動(dòng)定時(shí)器，然后運(yùn)行動(dòng)畫播放函數(shù)

4、核心播放函數(shù)部分

//播放實(shí)際運(yùn)行函數(shù)
play() {
 let len = this.items.length - 1;
 let now = this.active > len ? 0 : this.active;
 let old = this.active - 1 < 0 ? 0 : this.active - 1;
 //console.log("當(dāng)前", now, "老的", old);
 //關(guān)閉老元素
 this.items[old].show = false;
 this.items[old].itemStyle = {
  transition: "all 1.5s ease",
  transform: `translateX(${this.axisx}px)`
 };
 //顯示新元素
 this.items[now].show = true;
 this.items[now].itemStyle = {
  transition: "all 1.5s ease",
  transform: "translateX(0)",
  animation: "mymove 1.5s 2"
 };
 //記錄數(shù)據(jù)
 this.active = now + 1;
}

這個(gè)其實(shí)很簡(jiǎn)單，每次運(yùn)行的時(shí)候處理一下數(shù)據(jù)，拿到當(dāng)前要運(yùn)行的子元素id和老的元素，當(dāng)前的展示，老的移動(dòng)回去。最后記錄一下新的id

這里有一個(gè)坑點(diǎn)：就是animation部分，記得運(yùn)行2次，不然只是一次會(huì)導(dǎo)致下面的元素看不到抖動(dòng)效果。原因是在移動(dòng)的時(shí)候就抖動(dòng)完畢了。

5、主組件css部分

.dht-swiper-side {
 position: absolute;
 z-index: 2000;
 right: 0;
 display: flex;
 flex-flow: row;
 width: 100%;
}

三、組件文檔

四、個(gè)人組件效果展示

 
  我是組件1