精华内容
下载资源
问答
  • vue transition

    2019-09-20 05:26:55
    Vue2.0的过渡系统(transition)有了很大的改变,想把1.0的项目迁移到2.0,着实需要费一些功夫,今天我就要把vue2.0的过渡系统的用法搞清楚,因为之前确实踩了不少坑。这里只涉及单元素/组件的过渡实现,vue2.0的...

    Vue2.0的过渡系统(transition)有了很大的改变,想把1.0的项目迁移到2.0,着实需要费一些功夫,今天我就要把vue2.0的过渡系统的用法搞清楚,因为之前确实踩了不少坑。这里只涉及单元素/组件的过渡实现, vue2.0的文档 中还讲到了初始渲染的过渡、多个元素的过渡、多个组件的过渡和列表过渡,他们的过渡效果实现方式和单元素/组件的类似,我感觉实际项目中用的不太多吧,有兴趣的同学可以去了解一下,文档这里说的多个元素和多个组件 和我们的理解可能不太一样 ,一定要仔细阅读文档,搞清楚到底说的是什么样的情况。

    什么是过渡

    Vue只有在插入,更新或者移除DOM元素时才会应用过渡效果,过渡效果的应用可以通过不同方式实现,官方文档中提到了如下几种:

    1. 在CSS过渡和动画中自动应用class;

    2. 配合使用第三方的CSS动画库,如Animate.css;

    3. 在过渡钩子函数中使用JavaScript直接操作DOM;

    4. 配合使用第三方JavaScript动画库,如Velocity;

    上面四种方式其实主要就是两种,一个是利用CSS过渡或者动画,另一个是利用JavaScript钩子函数。

    怎么应用过渡到元素/组件上

    要想使元素或者组件应用到我们所写的过渡动画,需要使用vue提供的transition来封装组件成为过渡组件,transition需要与如下情景中的任一种一起使用:

    • v-if(条件渲染)

    • v-show(条件展示)

    • 动态组件

    • 在组建的根节点上,并且被vue实例DOM方法触发,如appendTo方法把组件添加到某个根节点上

    当需要插入或者删除封装成过渡元素的元素时,vue将做如下事情:

    1. 查找目标元素是否有CSS过渡或者动画,如果有就在适当的时候进行处理;

    2. 如果过渡组件设置了JavaScript钩子函数,vue会在相应阶段调用钩子函数;

    3. 如果以上两者都没有,DOM操作(插入或者删除)就在下一帧立即执行。

    CSS过渡

    先举一个典型的CSS过渡的例子:

    <!-- 首先将要过渡的元素用transition包裹,并设置过渡的name,然后添加触发这个元素过渡的按钮(实际项目中不一定是按钮,任何能触发过渡组件的DOM操作的操作都可以) -->
    <div>
      <button @click="show=!show">show</button>
      <transition name="fade">
        <p v-show="show">hello</p>
      </transition>
    </div>
    // 接着为过渡类名添加规则
    &.fade-enter-active, &.fade-leave-active
      transition: all 0.5s ease     
    &.fade-enter, &.fade-leave-active
      opacity: 0

    封装上面的代码,就可以实现一个简单的动画了,CSS的transition属性是用来设置过渡总体效果的,具体可参考: http://www.w3cplus.com/content/css3-transition 。

    CSS过渡类名

    组件过渡过程中,会有四个CSS类名进行切换,这四个类名与上面transition的name属性有关,比如name="fade",会有如下四个CSS类名:

    1. fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除;

    2. fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成之后移除;

    3. fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;

    4. fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成之后被删除;

    从上面四个类名可以看出,fade-enter-active和fade-leave-active在整个进入或离开过程中都有效,所以CSS的transition属性在这两个类下进行设置。

    上面示例中,fade-enter和fade-leave-active类设置CSS为opacity:0,说明过渡刚进入和离开的时候透明度为0,即不显示。当然还可以设置其他的CSS属性,transform属性是除了opacity之外经常在这里被用到的,transform用法可参考 http://www.w3cplus.com/content/css3-transition

    CSS动画

    组件过渡的实现不仅可以通过CSS过渡还可以通过CSS动画(animation)实现,建议先了解一下CSS3 Animation ,这里还是给个例子:

    <div>
      <button @click="show=!show">show</button>
      <transition name="fold">
        <p v-show="show">hello</p>
      </transition>
    </div>
    .fold-enter-active {
      animation-name: fold-in;
      animation-duration: .5s;
    }
    .fold-leave-active {
      animation-name: fold-out;
      animation-duration: .5s;
    }
    @keyframes fold-in {
      0% {
        transform: translate3d(0, 100%, 0);
      }
      50% {
        transform: translate3d(0, 50%, 0);
      }
      100% {
        transform: translate3d(0, 0, 0);
      }
    }
    @keyframes fold-out {
      0% {
        transform: translate3d(0, 0, 0);
      }
      50% {
        transform: translate3d(0, 50%, 0);
      }
      100% {
        transform: translate3d(0, 100%, 0);
      }
    }

    如果预先了解了CSS动画(上面给了链接),上面代码还是很好理解的,要注意的是CSS动画中,fold-enter类名在节点插入DOM后不会立即删除,而是在animationed事件触发时删除。

    自定义过渡类名

    上面的四个过渡类名都是根据transition的name属性自动生成的,那么能否自己定义这四个类名呢?是可以的,通过enter-class、enter-active-class、leave-class、leave-active-class这四个特性来定义。

    <div>
      <button @click="show=!show">show</button>
      <transition 
        name="fade"
        enter-class="fade-in-enter"
        enter-active-class="fade-in-active"
        leave-class="fade-out-enter"
        leave-active-class="fade-out-active"
      >
        <p v-show="show">hello</p>
      </transition>
    </div>
    &.fade-in-active, &.fade-out-active
      transition: all 0.5s ease     
    &.fade-in-enter, &.fade-out-active
      opacity: 0

    上面代码中,原来默认的fade-enter类对应fade-in-enter,fade-enter-active类对应fade-in-active,依次类推。

    JavaScript钩子函数

    除了用CSS过渡的动画来实现vue的组件过渡,还可以用JavaScript的钩子函数来实现,在钩子函数中直接操作DOM。我们可以在属性中声明以下钩子:

    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
      v-on:enter-cancelled="enterCancelled"
      v-on:before-leave="beforeLeave"
      v-on:leave="leave"
      v-on:after-leave="afterLeave"
      v-on:leave-cancelled="leaveCancelled"
    >
    </transition>
    methods: {
      // 过渡进入
      // 设置过渡进入之前的组件状态
      beforeEnter: function (el) {
        // ...
      },
      // 设置过渡进入完成时的组件状态
      enter: function (el, done) {
        // ...
        done()
      },
      // 设置过渡进入完成之后的组件状态
      afterEnter: function (el) {
        // ...
      },
      enterCancelled: function (el) {
        // ...
      },
      // 过渡离开
      // 设置过渡离开之前的组件状态
      beforeLeave: function (el) {
        // ...
      },
      // 设置过渡离开完成时地组件状态
      leave: function (el, done) {
        // ...
        done()
      },
      // 设置过渡离开完成之后的组件状态
      afterLeave: function (el) {
        // ...
      },
      // leaveCancelled 只用于 v-show 中
      leaveCancelled: function (el) {
        // ...
      }
    }

    上面的钩子函数中可以进行任何你想做的DOM操作。

    小技巧:如果你只想设置组件过渡进入的效果而不想有组件过渡离开的效果,这时你就可以用钩子函数,只设置beforeEnter、enter、afterEnter这几个钩子函数就可以了。

    转载于:https://my.oschina.net/u/3284240/blog/842552

    展开全文
  • Vue transition

    2017-08-11 20:31:17
    组件过渡过程中,会有四个CSS类名进行切换,这四个类名与上面transition的name属性有关,比如name="fade",会有如下四个CSS类名: fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除; ...

    组件过渡过程中,会有六个CSS类名进行切换,这六个类名与上面transition的name属性有关,比如name="fade",会有如下六个CSS类名:

    1. fade-enter:定义进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除;

    2. fade-enter-active:定义过渡的状态,元素被插入时就生效,在过渡过程完成之后移除;

    3. fade-enter-to: 定义进入过渡的结束状态。在元素被插入一帧后生效

    4. fade-leave:定义离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;

    5. fade-leave-active:定义离开过渡的状态,元素被删除时生效,离开过渡完成之后被删除;

    6. fade-leave-to:定义离开过渡的结束状态。在离开过渡被触发一帧后生效

          transition: all 0.5s
          &.fade-enter-avtive, &.move-leave-active     定义动画的过程中的透明度
            opacity: 1
          &.fade-enter, &.move-leave-to  定义动画的开始与动画结束的透明度
            opacity: 0

    transition一般与v-if v-show一起使用  参考链接

    展开全文
  • vue transition无效

    千次阅读 2020-03-12 15:06:32
    模仿iview drawer过程中,使用vuetransition组件,发现当transition的样式写在,transition .dashboard样式上面时,transition动画无效 <transition name="drawer"> <div class="dashboard" v-show=...

    vue transition无效

    模仿iview drawer过程中,使用vue的transition组件,发现当transition的样式写在,transition .dashboard样式上面时,transition动画无效

        <transition name="drawer">
          <div class="dashboard" v-show="dashboardShow"></div
        ></transition>
    
    //   写在上面无效
    //   .drawer-enter-active,
    //   .drawer-leave-active {
    //     transition: all 1s ease-out;
    //   }
    //   .drawer-enter, .drawer-leave-to /* .fade-leave-active below version 2.1.8 */ {
    //     width: 0;
    //   }
     .dashboard {
        width: 180px;
        height: 100%;
        background: chocolate;
        // transition: all 2s ease-out;
      }
      // 要写在 里面内容的下面
      .drawer-enter-active,
      .drawer-leave-active {
        transition: all 1s ease-out;
      }
      .drawer-enter, .drawer-leave-to /* .fade-leave-active below version 2.1.8 */ {
        width: 0;
      }
    
    展开全文
  • 这两天学习了Vue transition感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。 本来打算自己造一个transition的轮子,所以决定先看看源码,理清思路。Vuetransition组件提供了一系列钩子函数,...
  • vue Transition动画使用

    千次阅读 2017-12-14 22:09:21
    vue transition 使用
    
    <div id="example-1" class="demo">
      <button @click="show = !show">
        Toggle render
      </button>
      <transition name="slide-fade">
        <p v-if="show">hello</p>
      </transition>
    </div>
    <script>
    new Vue({
      el: '#example-1',
      data: {
        show: true
      }
    })
    </script>
    <style>
    .slide-fade-enter-active {
      transition: all .3s ease;
    }
    .slide-fade-leave-active {
      transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to {
      transform: translateX(10px);
      opacity: 0;
    }
    </style>

    具体参考文档:
    https://cn.vuejs.org/v2/guide/transitions.html#CSS-过渡

    展开全文
  • Vue transition过渡

    2020-03-13 14:22:09
    Vue transition过渡    Vue在插入、更新或者移除DOM时,提供多种不同方式的应用过渡效果。 (1)单元素/组件过渡          css过渡    ...
  • 今天小编就为大家分享一篇vue transition 在子组件中失效的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 本篇文章主要介绍了Vue Transition实现类原生组件跳转过渡动画的示例,具有一定的参考价值,有兴趣的可以了解一下
  • vue transition 使用

    2020-07-22 10:58:45
    transition <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition>...
  • vue transition 封装

    2020-07-10 15:44:55
    transition :name="activeName"> <slot v-if="value"></slot> </transition> </template> <script> export default { name: "index", props:{ value:{ .
  • vue transition的理解

    2020-09-09 17:44:55
    最近开发的过程中用到了vuetransition组件,写一下自己的心得体会。 transition的作用 首先我的理解是transition是作为元素切换时的过渡动画,例如在一个div进行v-if,v-show的时候,他的显示与隐藏分别进行怎样...
  • Vue transition 动画

    2019-10-08 06:07:05
    import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Test from '@/components/test' import Test2 from '@/components/test2' ...
  • Vue transition动画

    2020-04-13 14:30:03
    官网API: https://cn.vuejs.org/v2/guide/transitions.html 官方的demo点击显示与消失 <div id="demo"> <button v-on:click="show = !show"> Toggle ...transition name="fade"> ...
  • vue transition动画

    2020-04-03 11:08:55
    1、展开收起动画 <template> <button @click="show= !show">.../button>...--这里的name 和 css 类名第一个字段要一样-->...transition name="popup"> <div class="box" v-show="show">&l...
  • vue transition过渡效果

    2021-01-07 16:42:05
    Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡:(下列条件如果有变化就会产生transition过渡效果) 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 ...
  • 关于vue transition 内置组件 :name 对单个静态窗体显示隐藏无法实时动态渲染 //查询 cssstylesheets 获得 组件 文件 CSSStyleSheet 和 类名 index getkeyframes(name) { var animation = {}; // 获取所有的style...
  • vue transition 过渡动画

    2021-01-14 11:36:13
    transition元素(组件)是由vue提供的,可以为内部的元素添加过渡效果 过程演示 v-enter:过渡的初始状态(隐藏);在过渡开始前被添加,在过渡开始时会被移除 v-enter-to:过渡的结束状态(显示);在过渡开始时...
  • vue transition 动画

    2019-07-19 11:33:09
    <div id="example"> <button @click="show = !show">Toggle show</button>...transition name="bounce"> <p v-if="show">Lorem ipsum dolor sit amet, consectetur adi...
  • vue transition使用

    2019-04-01 15:03:44
    .fade-enter-active{ }进入过渡的结束状态,元素被插入时就生效,在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。 .fade-leave{ }离开过渡的开始状态,元素被删除时...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,431
精华内容 1,372
关键字:

vuetransition

vue 订阅