Vue 过渡（动画）transition组件案例详解_网络技术

Vue 过渡（动画）transition组件案例详解

发布时间 - 2026-01-10 22:42:58 点击率：次

Vue过度(动画)，本质走的是CSS3：transtion，animation。

控制器div显示/隐藏，代码如下：

 <div id="box">
    <input type="button" value="按钮" @click="toggle">
    <div id="div1" v-show="isShow"></div>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el:'#box',
      data:{
        isShow:false
      },
      methods:{
        toggle(){
          this.isShow = !this.isShow;
        }
      }
    });
  </script>

我们已经实现了对div的显示/隐藏，但是没有过渡（动画）效果。

1.单元素/组件的过渡

Vue提供了transition的封装组件，在下列情况中，可以给任何元素和组件添加”进入”和”离开”过渡动画。

条件渲染（使用 v-if）

条件展示（使用 v-show）

动态组件

组件根节点

改造：

  <div id="box">
    <input type="button" value="按钮" @click="toggle">
    <transition name="fade">
      <div id="div1" v-show="isShow" transiton="fade"></div>
    </transition>
  </div>
    .fade-enter-active, .fade-leave-active {
     transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
     opacity: 0
    }

其他更多过渡动画方法，请看文档：http://cn.vuejs.org/v2/guide/transitions.html

以上所述是小编给大家介绍的Vue 过渡（动画）transition组件案例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# vue # transition组件 # 过渡动画 # 关于Vue3过渡动画的踩坑记录 # vue3过渡动画的详解 # Vue.js每天必学之过渡与动画 # vue元素实现动画过渡效果 # Vue入门之animate过渡动画效果 # vue 组件中使用 transition 和 transition-group实现过渡动画 # 十分钟带你快速上手Vue3过渡动画 # 小编 # 的是 # 在此 # 给大家 # 所述 # 给我留言 # 感谢大家 # 疑问请 # 有任何 # 实现了 # 文档 # click # button # input # type # toggle # script # text # javascript # show

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：VPS建站必备：如何根据网站需求选择合适的配置？

下一篇：Laravel开发：如何使用Laravel Valet快速搭

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：VPS建站必备：如何根据网站需求选择合适的配置？

下一篇：Laravel开发：如何使用Laravel Valet快速搭