vue轮播组件实现$children和$parent 附带好用的gif录制工具

},
// x轴变化
axisx: {
type: Number,
default: 1000
}
},
watch: {
autoplay(val) {
val ? this.startTimer() : this.stopTimer();
}
},
data() {
return {
// 计时器
timer: "",
//子元素
items: [],
// 当前显示的元素
active: 0
};
},

看看就好，没啥多说的，我感觉挺清晰的

2、写你的子组件

这里必须跳跃一下，为什么呢？

因为：主组件主要负责动画运作和容器的作用。定义好你要的参数之后，其实主组件你直接看代码是不不符合编写逻辑的

有了主组件之后，我需要有子元素才能动起来，所以先把子元素加载进来

html部分

<div class="dht-swiper-side-item" :style="itemStyle">
 <slot></slot>
</div>

js核心部分

created() {
 //元素创建和需要更新父元素属性
 this.$parent && this.$parent.updateItems();
},
beforeMount() {},
mounted() {},
destroyed() {
 //元素销毁和需要更新父元素属性
 this.$parent && this.$parent.updateItems();
},

这里主要是创建元素的时候需要把元素加入主组件的items中，销毁的时候同样进行更新

主组件的更新代码

// 更新元素
updateItems() {
 this.items = this.$children.filter(
  // 更新元素需要确认为指定的子元素
  child => child.$options.name === "dhtSwiperSideItem"
 );
},

css核心部分

css部分主要是定义动画效果，和基础css，主要是看动画部分

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

3、一般弹窗动画之类的编写原理讲解

1、不能用display：none，因为那样元素是直接显示出来的，动画是无法有的。

2、举例：下方弹窗划出

其实在写这些弹窗的时候元素已经在页面上面加载好了，只是被我们隐藏到显示器之外了。

所以我们要做的是在点击显示的时候把元素位移回来

3、所以其实页面上基本的动画都是先放在你看不到的地方，然后再通过 transform

形变css给移动回来的。我这次的组件也是一样的。

4、主组件操作

1、回顾一下，刚才我们先写了主组件，主组件加载子组件，子组件会调用主组件函数，让主组件去更新自己的items，提前存好。方便使用