Velocity——自定义实现动画效果

css3的动画效果：

比如，通过选中节点显示对于的弹框动画,这里需要注意当前div是不可立即隐藏的，即：设置 display: none;

.right-to-left.active {
  transition: right 0.5s ease-out;
}

动画的运行速率，不同的速度会产生不同的结果，以下是可取值。

1. ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2. linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3. ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4. ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5. ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

 

参数为时间，单位为s（秒）或者ms（毫秒），默认就是0，也就是立即执行，如果在多个动画直接有先后顺序，那么它就会派上用场：

transition: all 0.5s ease-in-out 0s;

Velocity实现动画效果：比如显示隐藏菜单动画过渡

<template>
  <div>
    <transition
      name="fade"
      @before-enter="handlebeforeEnter"
      @enter="handleEnter"
      @after-enter="handleafterEnter"
    >
      <p
        v-show="jsshow"
        class="nav-container"
        :class="clazz"
        :style="sty"
        ref="cont"
      >
        js动画
      </p>
    </transition>
    <button @click="handlejsClick">
      切换js动画
    </button>
  </div>
</template>

<script>
import Velocity from 'velocity-animate'
    export default{
        data(){
            return {
                jsshow:true,
                width:'',
                clazz:'',
                sty:'',
            }
        },
        methods:{
            handlejsClick(){
                this.jsshow=!this.jsshow;
            },
            handlebeforeEnter(el){
                el.style.background='red'
                el.style.width='0'
            },
            handleEnter(el,done){
                let self = this;
                let cont = self.$refs.cont
                console.log('展开的过程',cont);
                Velocity(el, { opacity: 1, left: '300px' }, {
                  duration: 300,
                  easing: "ease-in-out",
                  progress(elements) {//展开的过程
                    el.style.width=el.style.left
                    console.log('展开的过程',el);
                    console.log('2222',done);
                    console.log('33333',elements);
                  },
                  // complete:done
                  complete(elements) {//展开结束
                    console.log('展开结束',elements);
                    console.log('el',el);
                    console.log('done',done);
                    done()
                  }
                })
            },
            handleafterEnter(el){// 执行done()触发
              // el.style.width='600px'
              el.style.background='yellow'

              console.log('展开结束',el);
                            // el.style.width='600px'
            }
        },
    }
</script>

直接绑定元素的方式也可以：

    expand() {// 展开 
      let self = this;
      let el = this.$refs['showBox']// 获取需要绑定的元素
      const maxWidth  = '300px'
      Velocity(el, { width: maxWidth }, {
        duration: 90,
        easing: "ease-in-out",
        progress(elements) {//展开的过程
          self.width = elements[0].clientWidth || maxWidth
          self.$emit("expand", self.width)
          // console.log(self.width, '展开的过程');
        },
        complete(elements) {//展开结束
          self.isExpanded = true
          self.width = elements[0].clientWidth
          // console.log(self.width, '展开结束', elements[0].clientWidth);
        }
      })
      // let t1=window.setTimeout(function(){self.$emit("expand", WIDTH2)}, 250);
    },
    unExpand() {// 折叠
      let self = this;
      let el = this.$refs.cont
      Velocity(el, { width: minWidth }, {
        duration: 90,
        easing: "ease-in-out",
        progress(elements) {//折叠的过程
          self.width = elements[0].clientWidth
          // console.log(self.width, '折叠的过程');
          self.$emit("expand", self.width)
        },
        complete(elements) {//折叠结束
          self.isExpanded = false
          self.width = elements[0].clientWidth || minWidth
          // console.log(self.width, '折叠结束', elements[0].clientWidth);
        }
      })


    },