VUE_使用el.animate实现自定义指令抖动效果

// 在 Vue 2 中注册自定义指令
Vue.directive('shake',{
// 当被绑定的元素插入到 DOM 中时
inserted(el, binding){
let value = binding.value
console.log(el, binding)
// 设置 transform-origin 样式
el.style.transformOrigin = 'center bottom';

const keyframes = [
{ transform: 'rotateZ(15deg)' }, // 0%
{ transform: 'rotateZ(-15deg)' }, // 50%
{ transform: 'rotateZ(15deg)' }  // 100%
];

// 定义动画选项
const options = {
duration: 400, // 持续时间
iterations: 3, // 迭代次数
easing: 'ease-in-out' // 缓动函数
};

// 使用 el.animate 方法来实现动画
el.animate(keyframes, options);
}
})

// 示例 Vue 组件使用自定义指令
new Vue({
  el: '#app',
  template: `
    <div>
      <h1 v-shake>抖动的标题</h1>
      <p>这是一个示例文本。</p>
    </div>
  `
});

无注释版

Vue.directive('shake',{
inserted(el, binding){
let value = binding.value
el.style.transformOrigin = 'center bottom'

const keyframes = [
{ transform: 'rotateZ(15deg)' },
{ transform: 'rotateZ(-15deg)' },
{ transform: 'rotateZ(15deg)' }
]
const options = {
duration: 400,
iterations: 3,
easing: 'ease-in-out'
}
el.animate(keyframes, options)
}
})

原文地址：https://blog.csdn.net/weixin_44599931/article/details/144075366

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！