收藏
评论

material ripple

// components/material/ripple/ripple.js

Component({

    /**

     * 组件的属性列表

     */

    properties: {

        extClass: String

    },


    /**

     * 组件的初始数据

     */

    data: {


    },

    /**

     * 组件的方法列表

     */

    methods: {

        over(e) {

            let _this = this;

            clearTimeout(_this.data.sid);

            _this.data.over = false;

            _this.stopRipple();

            _this.data.over = true;

            _this.data.sid = setTimeout(function() {

                _this.startRipple(_this.data.over);

                _this.data.sid = null;

            }, 74);

        },

        cancel() {

            clearTimeout(this.data.sid);

            this.data.sid = null;

            this.setData({

                over: false,

                rippling: false,

                animating: false

            });

        },

        onTap() {

            this.startRipple(false);

        },

        out() {

            if (this.data.sid !== null) {

                this.cancel();

                this.onTap();

            }

            this.setData({

                over: false,

                rippling: !!this.data.animating

            });

        },

        startRipple(over) {

            this.setData({

                rippling: true,

                over: over,

                animating: true

            });

        },

        stopRipple() {

            this.setData({

                rippling: this.data.over,

                animating: false

            });

        }

    }

})

<!--components/material/ripple/ripple.wxml-->

<rippleTouch bindtouchstart="over" bindtouchmove="cancel" bindtouchcancel="out" bindtouchend="out"/>

<rippleComponent class="{{rippling?'rippling':'calm'}} {{over?'over':'out'}} {{extClass}}" bindanimationend="stopRipple"/>


/* components/material/ripple/ripple.wxss */

ripple{

  display: inline !important;

  position: static !important;

}

rippleTouch{

  position: absolute;

  z-index: 3;

   width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  background: none;

}

rippleComponent{

position: absolute;

pointer-events: none;

  z-index: 2;

  --size:85%;

  width: var(--size);

  padding: var(--size) 0 0;

  height: 0;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

  border-radius:100%;

  background: rgba(0,0,0,.4);

  opacity: 0;

transform: scale(1.4);

transition: opacity 333ms ease-in-out;

}

rippleComponent.xxlarge{

  --size:110%;

}

rippleComponent.xlarge{

  --size:100%;

}

rippleComponent.large{

  --size:90%;

}

rippleComponent.medium{

  --size:80%;

}

rippleComponent.small{

--size:70%;

}

rippleComponent.xsmall{

--size:60%;

}

rippleComponent.xxsmall{

--size:50%;

}

rippleComponent.x3small{

--size:40%;

}

rippleComponent.rippling{

  animation: kf-rippling 333ms ease-in-out;

  transition: none;

  opacity:.4;

transform: scale(1.4);

}

rippleComponent.over{

  opacity:.6;

}

@keyframes kf-rippling{

  0%{

  opacity: .1;

  transform: scale(0);

  }

  100%{

    opacity:.4;

    transform: scale(1.4);

  }

}

<!--components/material/ripple/ripple2.wxml-->

<view class='ripple {{extClass}}'  hover-class='hover' hover-start-time='0'  hover-stay-time='333'/>


// components/material/ripple/ripple2.js

Component({

  /**

   * 组件的属性列表

   */

  properties: {

      extClass: String

  },


  /**

   * 组件的初始数据

   */

  data: {


  },


  /**

   * 组件的方法列表

   */

  methods: {


  }

})


/* components/material/ripple/ripple2.wxss */

@import "/styles/ripple.wxss";

ripple{

  display: inline !important;

  position: static !important;

}

.ripple{

  position: absolute;

  z-index: 3;

   width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  background: none;

}/* /styles/ripple.wxss*/

.ripple, .ripple-a {

    position: relative;

    z-index: 0;

    --size: 85%;

}


.ripple-h {

    overflow: hidden;

}


.ripple::before, .ripple-a::after {

    content: '';

    position: absolute;

    pointer-events: none;

    z-index: 2;

    width: var(--size);

    padding: var(--size) 0 0;

    height: 0;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    margin: auto;

    border-radius: 100%;

    background: rgba(0, 0, 0, 0.4);

    opacity: 0;

    transform: scale(1.4);

    transition: opacity 333ms ease;

}

.ripple.ripple-light::before,.ripple-a.ripple-light::after{

    background: rgba(255,255,255,.5)

}

.ripple.xxlarge {

    --size: 110%;

}


.ripple.xlarge {

    --size: 100%;

}


.ripple.large {

    --size: 90%;

}


.ripple.medium {

    --size: 80%;

}


.ripple.small {

    --size: 70%;

}


.ripple.xsmall {

    --size: 60%;

}


.ripple.xxsmall {

    --size: 50%;

}


.ripple.x3small {

    --size: 40%;

}


.ripple.hover::before, .ripple-a.hover::after, .ripple.navigator-hover::before,

.ripple-a.navigator-hover::after, .ripple.button-hover::before,

.ripple-a.button-hover::after {

    opacity: .6;

    transition: none;

    animation: kf-rippling-r 333ms ease;

}


@keyframes kf-rippling-r {

      0%{

  opacity: .1;

  transform: scale(0);

  }

  100%{

    opacity:.5;

    transform: scale(1.4);

  }

}


最后一次编辑于  2018-09-01  (未经腾讯允许,不得转载)
收藏赞 0