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

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组件案例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue Transition实现类原生组件跳转过渡动画的示例

    Vue Transition实现类原生组件跳转过渡动画的示例

    最近学习了Vue Transition的用法,感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记 官方文档:https://cn.vuejs.org/v2/guide/transitions.html 演示地址:http://www.coderlife.com (请在移动端查看,PC端查看请打开移动端调试模式) 前言 看了挺多Vue的UI框架都不带过渡动画,今天心血来潮,就把自己平时用的动效抽离出来.可直接通过脚手架init模版配合其他UI框架使用,不需要另外进行配置. 原理 模版中

  • 详解vue2.0 transition 多个元素嵌套使用过渡

    在做vue的demo的时候遇到一个问题,多个嵌套的元素如何设置transition? 我的代码: <div id='demo'> <button @click="show = !show">按钮</button> <transition name='move'> <div class="v-d" v-show="show"> <div class='in in_move'>&

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

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

    Vue过度(动画),本质走的是CSS3:transtion,animation. 控制器div显示/隐藏,代码如下: <div id="box"> <input type="button" value="按钮" @click="toggle"> <div id="div1" v-show="isShow"></div> </div&g

  • vue.js+boostrap项目实践(案例详解)

    vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

  • vue实现简单表格组件实例详解

    vue实现简单表格组件实例详解

    本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件 按钮组件等等,vue三大核心组件 路由 状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变.下面我会以一个简单的案例来说 第一步:构建一个简单的vue项目,老规矩

  • vue的toast弹窗组件实例详解

    相信普通的vue组件大家都会写, 定义 -> 引入 -> 注册 -> 使用 ,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): 0. 轻量 --一个组件小于 1Kib (实际打包完不到0.8k) 1.一般都是多处使用 --需要解决每个页面重复引用+注册 1.一般都是跟js交互的 --无需 在 <template> 里面写 <toast :show="true" text="弹窗消息

  • vue keepAlive缓存清除问题案例详解

    vue keepAlive缓存清除问题案例详解

    vue项目中经常会用到keepalive来做缓存,在应付基本要求上可以说非常方便.但是遇到同一个页面,根据条件不同,分别缓存或者不缓存,就有些麻烦了. 首先先把坑列出来: 1. <keep-alive v-if="xxx"> <router-view /> </keep-alive> <keep-alive v-else> <router-view /> </keep-alive> 网上很多都是这种方法,用了这种方

  • Vue.js之$emit用法案例详解

    Vue.js之$emit用法案例详解

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn:  例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> <br/&

  • Vue 短信验证码组件开发详解

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不是一个全能框架--它只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 摘要: 1.该组件基于Vue 2.1.X版本: 1. Vue 组件代码如下: Vue.component('timerBtn

  • 基于vue+canvas的excel-like组件实例详解

    基于vue+canvas的excel-like组件实例详解

    a vue component,基于vue的表格组件,主要解决大数据量的表格渲染性能问题,使用canvas绘制表格,同时支持类似excel的批量选中,复制黏贴删除,实时编辑等功能. vue-grid-canvas Install NPM / Yarn Install the package: npm install vue-canvas-grid --save Then import it in your project import Vue from 'vue' import Grid fro

  • Vue.js 图标选择组件实践详解

    本文介绍了Vue.js 图标选择组件实践详解,分享给大家,具体如下: 背景 最近项目中在做一个自定义菜单需求,其中有一个为菜单设置小图标的功能,就是大家常见的左侧菜单 设置图标不难,方案就是字体图标,可供使用的图标库也有很多,比如阿里巴巴的 Iconfont,以及 Fontaswsome 等,问题在于如何优雅的提供几百个图标供用户选择,而不需要开发去一个一个的写标签,也不需要一个个的去找图标. 字体图标库 Fontawesome 方案 我们使用字体图标的方式,一般是一个 <i class="

  • Vue多选列表组件深入详解

    Vue多选列表组件深入详解

    多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行多选的 UI 元素.这是一种常见的设计元素.有时候为了节省空间,我们会将选项折叠于 Combo Box 中.为了方便用户操作,这个组件还将添加 Select All 和 Clear All 两个按钮,允许用户快速选择或清除选择.这个 UI 元素曾被运用于 Correlation Plot App 中. 注册组件 注册 Multi-Select 组件,简单来说就是复制粘贴已封装好的代码部分.此

随机推荐