精华内容
下载资源
问答
  • transition标签或transition-group标签

    千次阅读 2019-08-09 19:38:45
    由于我们使用vue时,也要适当的添加不同方式的应用...那么:transition标签或transition-group标签 ① transition 只能满足单个节点的过渡效果,在多个节点的渲染上显得力不从心。 为了更好适用于更多的场景,v...

    由于我们使用vue时,也要适当的添加不同方式的应用过渡效果。但有时会遇到这样的问题。

    这是一种情况
    在这里插入图片描述
    另一种情况
    在这里插入图片描述
    在这里插入图片描述
    解决方法:将每个transition和button再用一个盒子包起来
    在这里插入图片描述

    但是:我们会发现:
    报错提示:transition-group

    那么:transition标签或transition-group标签
    在这里插入图片描述

    transition 只能满足单个节点的过渡效果,在多个节点的渲染上显得力不从心。
    为了更好适用于更多的场景,vue 提供 transition-ground来多个元素的过渡

    transition-group 拥有transition所有属性
    transition本身不会渲染出元素
    但是transition-group 会渲染出元素节点;


    1)在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup
    2) 如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性
    3)通过 为 transition-group 元素,设置 tag 属性,指定 transition-group 渲染为指定的元素,如果不指定 tag 属性,默认,渲染为 span 标签

     <transition-group appear tag="ul">
            <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                {{item.name}}
            </li>
     </transition-group>
    

    但是当我们把将transition标签改成transition-group标签之后,发现控制台里依然有错误提示—当transition-group里有多个元素时,需要给每个元素设置key值,并且每个key值是不能一样的。设置完后,页面就恢复正常了。
    在这里插入图片描述

    展开全文
  • ​vue中的transtion是一个动画过渡封装组件,常见的情景时用transition标签包裹的DOM含有动画效果。transition组件的动画效果过渡设置基于css的transition属性设置。如果你对CSS中的transition的使用不够熟悉的话,...

    9a5bcd22814a63114328033ef0a7f13b.png

    原创:牛津小马哥web前端工程师陈小妹妹。

    fb0bdf7edbaa513c4f99a8b36a343147.png

    ​vue中的transtion是一个动画过渡封装组件,常见的情景时用transition标签包裹的DOM含有动画效果。transition组件的动画效果过渡设置基于css的transition属性设置。

    如果你对CSS中的transition的使用不够熟悉的话,可以查看往期文章

    a href="http://mp.weixin.qq.com/s?__biz=MzIzMDM3NzUwOA==&mid=2247483677&idx=1&sn=8c09f19d204b6892aa0ba0212cb5ccfc&chksm=e8b51056dfc29940dcba7684750fd5eebf0360ec837d5077fdf575f5c5f73d7b8441759da865&scene=21#wechat_redirect">css transition

    现在,让我们开始吧!

    基本使用:

    当页面中的DOM元素需要进行更新,移除和插入时,可使用transition封装组件进行动画的过渡。

    同时,transiton组件可配合CSS类名,第三方 CSS 动画库,过渡组件的钩子函数以及第三方 JavaScript 动画库使用。使过渡效果更多样化。

    官网例子:

    <div id="demo">
      <button v-on:click="show = !show">
        Toggle
      </button>
      <transition name="fade">
        <p v-if="show">hello</p>
      </transition>
    </div>
    new Vue({
      el: '#demo',
      data: {
        show: true
      }
    })
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to  {
      opacity: 0;
    }
    

    vue提供的wrapper包装组件——transition,在包裹的元素中,有涉及到v-if,,v-show, 动态组件,组件根节点,,都会给它们添加进入/离开的过渡效果。

    Transition Classes

    从上面的例子中,也许你发现了给transiton组件的指定class类添加CSS,才有呈现过渡效果。

    1b97642e8f4e1aacc100e72116596986.png

    一个完整的transiton组件的class类,有6个,通过指定不同的class来添加样式来达到过渡的CSS效果。

    01v-enter:定义进入过渡的开始状态。02v-enter-active:定义进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。03v-enter-to: 定义进入过渡的结束状态。04v-leave: 定义离开过渡的开始状态。05v-leave-active:定义离开过渡生效时的状态。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。06v-leave-to: 定义离开过渡的结束状态。

    默认类名是以上6个,如果在transition标签中指定了name=’xxx’,那么6个类名将会变成

    xxx开头的,例如xxx-enter-active。

    CSS transitions

    我们可以通过以下特性来自定义过渡类名:

    1. enter-class
    2. enter-active-class
    3. enter-to-class
    4. leave-class
    5. leave-active-class
    6. leave-to-class

    他们的优先级高于普通的类名,一般与其他第三方 CSS 动画库,如 Animate.css结合使用。

    其实就是绑定了class在transition标签中,class引用了Animate.css的class样式包。

    示例:

    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    
    <div id="example-3">
      <button @click="show = !show">
        Toggle render
      </button>
      <transition
        name="custom-classes-transition"
        enter-active-class="animated tada"
        leave-active-class="animated bounceOutRight"
      >
        <p v-if="show">hello</p>
      </transition>
    </div>
    new Vue({
      el: '#example-3',
      data: {
        show: true
      }
    })

    JavaScript 钩子

    // ...
    methods: {
    
      beforeEnter: function (el) {
            //...
      },
    
      // 回调函数 done 是可选的
      enter: function (el, done) {
        // ...
        done()
      },
      afterEnter: function (el) {
        // ...
      },
      enterCancelled: function (el) {
        // ...
      },
      beforeLeave: function (el) {
        // ...
      },
      // 回调函数 done 是可选的
      leave: function (el, done) {
        // ...
        done()
      },
      afterLeave: function (el) {
        // ...
      },
      // leaveCancelled 只用于 v-show 中
      leaveCancelled: function (el) {
        // ...
      }
    }

    这些钩子函数可以结合 CSS transitions/animations 使用,也可以单独使用。

    当只用 JavaScript 过渡的时候,在enter 和 leave 中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。

    推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false",Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

    可以在属性中声明 JavaScript 钩子

    <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>
    

    关于transtion的内容就是这些~感谢阅读!

    展开全文
  • vue中transition标签如何使用

    千次阅读 2020-10-10 09:54:57
    vue中transition标签如何使用 概述 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡...

    vue中transition标签如何使用

    概述

    Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:

    • 在 CSS 过渡和动画中自动应用 class
    • 可以配合使用第三方 CSS 动画库,如 Animate.css
    • 在过渡钩子函数中使用 JavaScript 直接操作 DOM
    • 可以配合使用第三方 JavaScript 动画库,如 Velocity.js

    transition标签使用

    Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡

    • 条件渲染 (使用 v-if)
    • 条件展示 (使用 v-show)
    • 动态组件
    • 组件根节点
      这里是一个典型的例子:
      HTML部分:
    <div id="demo">
      <button v-on:click="show = !show">
        Toggle
      </button>
      <transition name="fade">
        <p v-if="show">hello</p>
      </transition>
    </div>
    

    JS部分:

    new Vue({
      el: '#demo',
      data: {
        show: true
      }
    })
    

    CSS部分:

    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0;
    }
    
    当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理:
    1. 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名。
    2. 如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用。
    3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作 (插入/删除) 在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,和 Vue 的 nextTick 概念不同)

    过渡的类名

    在进入/离开的过渡中,会有 6 个 class 切换。

    1. v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
    2. v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
    3. v-enter-to:2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
    4. v-leave:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
    5. v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
    6. v-leave-to:2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。
      在这里插入图片描述

    对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 ,则 v- 是这些类名的默认前缀。如果你使用了 ,那么 v-enter 会替换为 my-transition-enter。

    v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线。

    CSS 过渡

    常用的过渡都是使用 CSS 过渡。
    下面是一个简单例子:
    HTML部分:

    <div id="example-1">
      <button @click="show = !show">
        Toggle render
      </button>
      <transition name="slide-fade">
        <p v-if="show">hello</p>
      </transition>
    </div>
    

    JS部分:

    new Vue({
      el: '#example-1',
      data: {
        show: true
      }
    })
    

    CSS部分:

    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .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
    /* .slide-fade-leave-active for below version 2.1.8 */ {
      transform: translateX(10px);
      opacity: 0;
    }
    

    过渡模式有一个问题:一个离开过渡的时候另一个开始进入过渡。这是 的默认行为 - 进入和离开同时发生,因为这样也导致了两个卡片的过渡不太复合需求,我们需要的是一个先离开后另一个再进入。

    同时生效的进入和离开的过渡不能满足所有要求,所以 Vue 提供了 过渡模式
    in-out:新元素先进行过渡,完成之后当前元素过渡离开。
    out-in:当前元素先进行过渡,完成之后新元素过渡进入。

    <transition name="fade-transform" mode="out-in">
          <keep-alive v-if="isRouterAlive && $route.meta.keepAlive">
            <router-view/>
          </keep-alive>
          <router-view v-if="isRouterAlive && !$route.meta.keepAlive" />
        </transition>
    

    因此我们需要在transition标签中添加mode来达成效果:
    希望此篇文章对你有帮助,详细内容可以查看官方文档.

    展开全文
  • 对要使用动画的组件或者模块包上一层transition标签, 一般搭配v-if、v-show、动态组件、组件根节点来使用。 <div> <button @click="show = !show"></button> <transition name="fade"> ...

    transition

    对要使用动画的组件或者模块包上一层transition标签,
    一般搭配v-if、v-show、动态组件、组件根节点来使用。

    <div>
       <button @click="show = !show"></button>
       <transition name="fade">
          <div v-show="show" style="width: 100%;height: 5rem;background-color: #ff0000;position: fixed;bottom: 0;"></div>
       </transition>
    </div>
    
    
    <style>
       .fade-enter-active {
          transition: all 0.2s ease;
       }
       .fade-leave-active {
          transition: all 0.2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
       }
       .fade-enter, .fade-leave-to{
          transform: translateY(5rem);
          opacity: 0;
       }
    </style>
    <script>
    var  app = new Vue({
        el:'#app',
        data: {
           show:true,
        }
    });
    </script>
    
    
    展开全文
  • vue中用transition标签css动画效果 <template> <transition name="drop-down-transition"> <!-- div实现动画 --> <div v-show="isShow" class="div-box"><div> </transition...
  • Vue公司的动画并没有非常炫酷的效果,不过...transition&amp;amp;gt; 包裹 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &a
  • vue过渡动画transition标签+animate.css

    千次阅读 2019-08-24 11:25:53
    transition标签介绍 进入/离开的6个class切换 v-enter:定义进入过度的开始状态。在元素被插入之前生效,在元素被插入后的下一帧移除。 v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在...
  • transition标签、scale标签和inset标签

    千次阅读 2016-12-06 10:02:26
    很多时候我们在实现渐变的动画效果时,都会使用到animation,但实际上我们有既简单又完美的解决方法,没错,它就是Transition啦,Transition用于实现两个Drawable之间的淡入淡出的效果,它的属性如下: <transition ...
  • Vue的动画并没有非常炫酷的效果...transition> 包裹 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script rel="script" s
  • transition :name="transitionName" :duration="{ enter: 500, leave: 0 }" >  <router-view></router-view> </transition> 转载于:https://www.cnblogs.com/Mr-Rshare/p/10207162.h...
  • transition只能用于单个元素的动画,list等多元素的动画要使用transition-group知识点1:style的组合使用入场动画.v-enter, .v-leave-to { opacity: 0; transform: translateY(80px); }其中 opacity:元素不透明级别...
  • transition这个标签可以实现图片的淡入淡出的效果 不过只能在两张图片中淡入淡出 以下使用androidstudio进行演示: 注意,以下为简单实现! 首先要创建一个xml资源文件,在项目目录下的Res ->drawable右键,New-&...
  • 【记录】VUE transition标签的运用

    千次阅读 2019-02-22 09:27:02
    运用经历记录 &amp;lt;div&amp;gt; &amp;lt;button @click=&quot;show = !...transition name=&quot;fade&quot;&amp;gt; &amp;lt;div v-show=&quot;show&
  • 原理是利用绝对定位将导航栏对应的选项堆在一个层面上,鼠标划过哪个tab标签,就改变哪个标签对应的选项的z-index,将他层级变高,放在最上层;<style> body{ font-size: 0; } .box{ text-align: center;...
  • Vue的动画并没有非常炫酷... 在需要用动画的地方使用标签将元素包裹起来,注意:该标签只作用域v-show元素,如下图: 如果你的transition标签没起名字就默认是上面这些类名,如果起了名字,那么就是你自己定义的动画。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 797
精华内容 318
关键字:

transition标签