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)
	}
})