vue2点击button增加动态效果

### 实现 Vue2 中 Button 的点击动态效果

在 Vue2 项目中实现按钮点击后的动态效果可以通过多种方式完成，其中一种常见的方式是使用 `<transition>` 组件来创建平滑过渡的效果。这不仅限于简单的淡入淡出，还可以包括尺寸变化、颜色渐变等多种视觉反馈。

#### 使用 Transition 创建按钮点击动画

为了使按钮点击具有动态效果，在 HTML 部分定义一个按钮并为其设置 `v-on:click` 来绑定点击事件处理器：

<div id="app">
    <button v-on:click="toggle">Toggle</button>
    <!-- 定义 transition 区域 -->
    <transition name="fade">
        <p v-if="show">这是一个带有动画效果的消息。</p>
    </transition>
</div>

接着，在 JavaScript 中初始化 Vue 实例，并控制消息的显示状态：

new Vue({
    el: '#app',
    data() {
        return { show: true }
    },
    methods: {
        toggle() {
            this.show = !this.show;
        }
    }
});

对于 CSS 而言，则需指定 `.fade-enter-active`, `.fade-leave-active` 类以及它们对应的进入和离开的状态样式:

.fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s ease;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}

上述代码展示了如何通过点击按钮改变元素可见性的简单示例[^2]。每当用户单击 "Toggle" 按钮时，文本将会优雅地淡入或淡出视图之中。

除了基本的透明度转换外，也可以尝试其他类型的动画，比如缩放、旋转或是自定义的关键帧动画等更复杂的交互体验[^4]。