Vue 让元素抖动/摆动起来的实现代码
发布时间：2020-12-17 03:12:30 所属栏目：百科 来源：网络整理
导读：首先展示一下效果，狠狠点击 代码github : 先说一下用法： 思路： 1.抖动就是摆动，现实中的钟摆可以很形象。 2.当摆动到临界点后，就会向相反的方向摆动。 3.在没有动力时，摆动会慢慢停止。 初始化抖动： 这里准备动画开始前的工作。 执行动画： 执行动画
|
首先展示一下效果，狠狠点击 代码github : 先说一下用法： 思路： 1.抖动就是摆动，现实中的钟摆可以很形象。 2.当摆动到临界点后，就会向相反的方向摆动。 3.在没有动力时，摆动会慢慢停止。 初始化抖动：这里准备动画开始前的工作。 执行动画：执行动画，当判断已经无力摆动后，让元素回归到原来的位置，并清除动画。 修改元素位置：这里需要判断需要 Z 轴摆动吗？ 当需要时，必须给当前元素的父级添加 perspective,从而修改子级透视效果 0) {
const parentEl = this.$el.parentNode;
Object.keys(this.perspectiveStyle).forEach((key) => {
parentEl.style[key] = this.perspectiveStyle[key];
});
}
},
最后看看可以传的属性： { return { z: 8 }; },},start: {
type: Boolean,required: true,shiftPercent: {
type: Number,default: 0.1,// 移动range中初始值的百分比
},perspectiveStyle: {
type: Object,default: () => {
return {
perspective: '300px',perspectiveOrigin: 'center center'
};
}
}
},
上面是可以传的属性，大家可以按照情况修改 最后：这里我只写了简单的动画，也可以根据不同情况进行修改，从而达到想要的效果。这里已经满足输入框错误抖动的效果了。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |