前言
一个需求需要做动画效果,刚好搏皮有用mojs,就打算通过mojs实现;
Vue中的$nextTick有什么作用
: Vue中的$nextTick有什么作用?
mojs
: https://mojs.github.io/tutorials/
内容
安装
npm i @mojs/core
OR
yarn add @mojs/core
使用
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()
},
}
}
报错
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即可
this.$nextTick(() => {
this.animate()
})
标签:mojs,Vue,f526,mo,js,umd,使用,new
From: https://www.cnblogs.com/wangyang0210/p/16976503.html