向上轮播并消失

直接上代码

父组件

可配置动画时间(transitionDuration)，轮播间隔时间(intervalTime)，每一项动画开始的间隔时间(animationInterval)，显示条数(showCount)，消失偏移量(offsetPrecent)，是否反向等(reverse),配合透明度和模糊效果

<template>
    <banner :transitionDuration="300" :intervalTime="2000" :animationInterval="100" :showCount="4" :offsetPrecent="0.5" :reverse="true" :startBlur="0" :endBlur="10" :startOpacity="1" :endOpacity="0.2">
    </banner>
</template>

子组件

<template>
    <div class="banner" ref="banner" v-on:mouseenter="mouseenterFunc" v-on:mouseleave="mouseleaveFunc" v-bind:style="`height: ${containerSize.height}px`">
    <slot></slot>
    </div>
</template>

<script>
export default {
   props:{
       // 是否反向
       reverse: {
           type: [Boolean],
           default: function () {
               return false
           }
       },
       // 偏移的百分比
       offsetPrecent: {
           type: [Number],
           default: function () {
               renturn 0.1
           }
       },
       
       
   }
}
</script>

结束

快乐分享！