mojs——在Vue中使用mojs

前言

一个需求需要做动画效果，刚好搏皮有用mojs，就打算通过mojs实现； Vue中的nextTick有什么作用: Vue中的nextTick有什么作用？ mojs: https://mojs.github.io/tutorials/

内容

安装

代码语言：javascript复制

npm i @mojs/core 
OR 
yarn add @mojs/core

使用

代码语言：javascript复制

import mojs from '@mojs/core'

export default {
 mounted() {
        this.getData()
        this.$nextTick(() => {
            this.animate()
        })
    },
    methods: {
        countUp() {},
        animate() {
            class Down extends mojs.CustomShape {
                getShape() {
                    return '<path d="M94.27,81.05,91.71,59.87a.86.86,0,0,0-.57-.7.89.89,0,0,0-.88.2l-6.32,6.31L55,36.85a1.72,1.72,0,0,0-2.4,0L41.75,47.67,12.25,18.25a.85.85,0,0,0-1.2,0l-4.8,4.8a.86.86,0,0,0,0,1.21L40.54,58.48a1.71,1.71,0,0,0,2.42,0L53.81,47.66l24.1,24L71.59,78a.85.85,0,0,0,.5,1.44L93.33,82a.8.8,0,0,0,.7-.24.82.82,0,0,0,.24-.7Zm0,0" />'
                }
                getLength() {
                    return 2671.37939453125
                }
            }
            mojs.addShape('down', Down)
            const down = new mojs.Shape({
                parent: '#animate',
                shape: 'down',
                fill: '#fff',
                scale: { 0.3: 0.5 },
                repeat: 100,
                duration: 1000,
                isYoyo: true,
                backwardEasing: 'sin.in',
                isShowEnd: false,
            }).play()
        },
    }
}

报错

代码语言：javascript复制

vue.runtime.esm.js?2b0e:4603 [Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of null (reading 'appendChild')"
found in
---> <DataKanban>
       <Index> at src/views/indexs/index.vue
         <VScaleScreen> at src/components/scale-screen/scale-screen.vue
           <Home> at src/views/home.vue
             <App> at src/App.vue
               <Root>

TypeError: Cannot read properties of null (reading 'appendChild')
    at i.value (mo.umd.js?f526:6:1)
    at new t (mo.umd.js?f526:6:1)
    at i.eval (mo.umd.js?f526:6:1)
    at new r (mo.umd.js?f526:6:1)
    at i.eval (mo.umd.js?f526:6:1)
    at new i (mo.umd.js?f526:6:1)
    at i.eval (mo.umd.js?f526:6:1)
    at new i (mo.umd.js?f526:6:1)
    at i.eval (mo.umd.js?f526:6:1)
    at new i (mo.umd.js?f526:6:1)

!> 通过报错不难看出,是没有拿到相应的dom,所以我们只需要使用$nextTick来获取dom即可

代码语言：javascript复制

 this.$nextTick(() => {
    this.animate()
 })

动画 core eval scale src

0 人点赞