vue动画自定义v-前缀

最新推荐文章于 2021-11-29 11:18:16 发布

原创最新推荐文章于 2021-11-29 11:18:16 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在Vue中实现自定义动画效果，通过一个按钮控制显示隐藏的标题，并使用CSS过渡来实现平滑的动画效果。该示例展示了Vue.js的v-if指令与自定义transition的结合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="hello">
    <input type="button" value="button" @click="flag=!flag" />
    <transition name="custom">
      <h1 v-if="flag">这是一个自定义v-前缀的动画</h1>
    </transition>
  </div>
</template>

<script>
  export default {
    name: "HelloWorld",
    data() {
      return { flag: false };
    },
    mounted() {}
  };
</script>

<style scoped>
  .custom-enter,
  .custom-leave-to {
    opacity: 0;
    transform: translateX(50px);
  }
  .custom-enter-active,
  .custom-leave-active {
    transition: all 0.8s ease;
  }
</style>