前言
一个需求需要做动画效果，刚好搏皮有用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() })
学无止境,谦卑而行.
