### Vue3 中通过类选择器获取 DOM 元素并动态修改 CSS `transform` 属性 在 Vue3 中，推荐使用组合式 API 和模板中的 `ref` 来绑定特定的 DOM 节点。对于需要频繁操作样式的场景，可以通过定义响应式变量来控制样式变化。 #### 绑定 Ref 到目标元素 为了能够访问具体的 DOM 元素，可以在模板内给目标元素设置 `ref` 属性，并将其关联至组件内的相应引用变量： ```html <div ref="animatedElement" class="active-image-7"></div> ``` 这里假设 `.active-image-7` 是要施加动画效果的目标元素的选择器名称[^1]。 #### 定义 Transform 的初始状态与更新逻辑 接着，在 `<script setup>` 或者选项式 API 下创建一个函数用来改变该元素的位置偏移量: ```javascript import { ref, onMounted } from 'vue' // 创建对DOM元素的引用 const animatedElement = ref(null) let offsetValue = -10; function updateTransform() { if (!animatedElement.value) return; // 更新当前offset值 offsetValue *= -1; // 应用新的变换矩阵 animatedElement.value.style.transform = `translateY(${offsetValue}px)`; } onMounted(() => { setInterval(updateTransform, 2500); }) ``` 上述代码片段展示了如何利用 JavaScript 实现每间隔一段时间切换一次 Y 方向上的位移距离，从而达到上下浮动的效果[^2]。 值得注意的是，如果希望更平滑地实现这种周期性的位置变动，则可以直接借助 CSS 动画特性而无需手动编写定时任务去调整 `transform` 值。正如前面提到的例子那样，只需简单配置好关键帧即可让浏览器自动处理整个过程。 另外一种方式是在脚本部分声明一个数据项作为开关标志，再配合条件渲染指令 (`v-bind:class`) 将不同的静态样式应用于同一元素之上；当此标记发生变化时便会触发重新计算最终呈现出来的视觉外观。 #### 使用 Class 控制 Animation Play State 还可以考虑采用另一种策略——即不直接操控 `transform` ，而是通过切换附加于目标元素身上的额外 className 来间接影响其行为表现形式： ```css @keyframes float-up-down{ 0%, 100% { top: 0 } 50% { top: -10px } } .floating-effect { position:relative; animation-name:float-up-down ; animation-duration:.8s ; animation-timing-function:ease-in-out ; animation-iteration-count:infinite ; } ``` 然后在 JS 部分添加或删除此类名以开启/暂停指定动作序列： ```javascript if (shouldStartAnimation){ animatedElement.value.classList.add('floating-effect'); }else{ animatedElement.value.classList.remove('floating-effect'); } ``` 这种方法不仅简化了编码工作量而且提高了可维护性和扩展性[^4]。