transition

  • name 用于自动生成 CSS 过渡类名。例如:name: fade 将自动拓展为 .fade-enter ,.fade-enter-active等。默认类名为 "v"

  • appear ,是否在初始渲染时使用过渡。默认为 false。

  • css ,是否使用 CSS 过渡类。默认为 true。如果设置为 false,将只通过组件事件触发注册的 JavaScript 钩子。

  • type,指定过渡事件类型,侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。

  • mode ,控制离开/进入的过渡时间序列。有效的模式有 "out-in" 和 "in-out";默认同时生效。

  • duration, 指定过渡的持续时间。

CSS 动画 animation

  CSS 动画用法同 CSS 过渡,区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除,而是在 animationend事件触发时删除。

过渡的类名

  1. v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

  2. v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。

  3. v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。

  4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。

  5. v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。

  6. v-leave-to: 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

同时使用过渡和动画(type)

  同时使用过渡和动画时,需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

显性的过渡持续时间 (duration)

  可以用 <transition> 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计):

        <transition :duration="1000">...</transition>

  也可以定制进入和移出的持续时间:

        <transition :duration="{ enter: 500, leave: 800 }">...</transition>

JavaScript钩子函数

  可以在属性中声明 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>
        methods: {
         beforeEnter: function (el) {},
         // 当与 CSS 结合使用时
         // 回调函数 done 是可选的
         enter: function (el, done) {
           done()
        },
         afterEnter: function (el) {},
         beforeLeave: function (el) {
        },
         // 当与 CSS 结合使用时
         // 回调函数 done 是可选的
         leave: function (el, done) {
           done()
        },
      }

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

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

初始渲染的过渡(appear)

  可以通过 appear 特性设置节点在初始渲染的过渡

多个元素的过渡(key)

  对于原生标签可以使用 v-if / v-else 实现过渡,当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们。

  也可以通过给同一个元素的 key 特性设置不同的状态来代替 v-if 和 v-else,

  使用多个 v-if 的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡。

        <transition>
         <button v-bind:key="docState">
          {{ buttonMessage }}
         </button>
       </transition>
        computed: {
         buttonMessage: function () {
           switch (this.docState) {
             case 'saved': return 'Edit'
             case 'edited': return 'Save'
             case 'editing': return 'Cancel'
          }
        }
      }

过渡模式(mode)

  • in-out:新元素先进行过渡,完成之后当前元素过渡离开。

  • out-in:当前元素先进行过渡,完成之后新元素过渡进入。

        <transition name="fade" mode="out-in">
         <!-- ... the buttons ... -->
       </transition>

多个组件的过渡

  多个组件的过渡只需要动态组件就可以实现,不需要使用 key。

transition-group

  • 不同于 <transition>,它会以一个真实元素呈现:默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。

  • 过渡模式不可用,因为我们不再相互切换特有的元素。

  • 内部元素 总是需要 提供唯一的 key 属性值。

  • CSS 过渡的类将会应用在内部的元素中,而不是这个组/容器本身。

  • v-move 改变定位,对于设置过渡的切换时机和过渡曲线非常有用。

Vue 使用了一个叫 FLIP 简单的动画队列使用 transforms 将元素从之前的位置平滑过渡新的位置。FLIP 动画不仅可以实现单列过渡,多维网格也同样可以过渡

注意:使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案,可以设置为 display: inline-block 或者放置于 flex 中。

Vue API 4 (过渡和动画)的更多相关文章

  1. Vue——关于css过渡和动画那些事

    1. 单元素/组件的过渡transition Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v ...

  2. 在vue中同时使用过渡和动画

    在上次的动画中,在显示和隐藏有动画效果,但是,刷新页面的时候,第一次的显示没有动画效果 需求:刷新页面的时候也有动画效果 <transition name='fade' appear enter ...

  3. Vue过渡与动画

    通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡 ...

  4. 9、VUE过渡和动画

    1.过渡效果 Vue提供了transition的封装组件,在下列情形中,可以给任何元素和组件添加entering/leaving过渡. 我们注意到,<transition>标签的标记是 n ...

  5. (尚014)Vue过渡与动画

    操作元素时有个过渡或动画的效果(渐变和移动的效果和放大缩小的效果) 过渡:trasition 动画:animation 1.vue动画的理解 1)操作css的trasition或animation(它 ...

  6. vue.js之过渡动画

    vue提供了一个封装动画的组件 <transition name="tr"></transition>,将需要执行动画的元素包裹在该组件中,在通过css修改 ...

  7. Vue过渡和动画效果展示(案例、GIF动图演示、附源码)

    前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...

  8. 058_末晨曦Vue技术_过渡 & 动画之过渡的类名

    进入/离开 & 列表过渡 点击打开视频讲解更加详细 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class ...

  9. Vue入门笔记#过渡

    Vue过渡,可以在元素从DOM中移除,插入时自动调用过渡效果.根据设定,会适时的触发过渡效果. 在使用的目标标签里添加 transition: <div transition="my_ ...

随机推荐

  1. 【JAVA】编程(2)---时间管理

    作业要求: 定义一个名为 MyTime 的类,其中私有属性包括天数,时,分,秒:定义一个可以初始化时,分,秒的构造方法,并对初始化数值加以限定,以防出现bug:定义一个方法,可以把第几天,时,分,秒打 ...

  2. Django 小实例S1 简易学生选课管理系统 8 CSS样式优化

    Django 小实例S1 简易学生选课管理系统 第8节--CSS样式优化 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 前面的几节下来,用户模块基 ...

  3. 菜鸡的Java笔记 第二十五 wrapperClass 包装类

    wrapperClass 包装类         1.包装类的特点        2.装箱与拆箱操作        3.数据转型处理            内容        Object 类可以接收 ...

  4. 菜鸡的Java笔记 第二十四 - java 接口的基本定义

    1.接口的基本定义以及使用形式        2.与接口有关的设计模式的初步认识        3.接口与抽象类的区别                 接口与抽象类相比,接口的使用几率是最高的,所有的 ...

  5. 【从零开始学习Node.js】一.在CentOS 7中部署Node.js环境

    一.背景信息 Node.js是一个基于Chrome V8引擎的JavaScript运行环境,用来方便快速地搭建易于扩展的网络应用.Node.js使用了一个事件驱动.非阻塞式I/O的模型,使其轻量又高效 ...

  6. [bzoj4942]整数

    考虑暴力,即需要考虑如何实现$\pm 2^{k}$,相当于要找到之后的第一个0或者之前的第一个1(维护区间是否全0/1即可),然后区间重置,可以用线段树维护,复杂度为$o(900n)$(a的划分和线段 ...

  7. Kubernetes容器编排探索与实践v1.22.1-上半部分

    概述 **本人博客网站 **IT小神 www.itxiaoshen.com Kubernetes官网地址 https://kubernetes.io Kubernetes GitHub源码地址 htt ...

  8. 卸载.net 5.0后使用dotnet提示Found .NET Core SDK

    之前安装了预览版本的vs2019后试了下,然后卸载了.但发现控制台执行dotnet相关命令提示Found .NET Core SDK, but did not find dotnet.dll at [ ...

  9. 【Proteogenomis】工具评述

    2015年的综述文章,marker一下,供以后比较试用.蛋白质基因组学研究中的质谱仪与生物信息学方法. 针对蛋白质基因组学的分析研究,总结了质谱仪和蛋白质基因组学流程分析软件的选择,重点评述了常用的生 ...

  10. 通过mac地址确认二层交换机某个端口下接的终端设备IP

    正常来说,二层交换机主要是通过mac地址进行通信的,这就导致我们无法直接通过arp表来确认交换机端口下终端设备的IP: 但我们仍然能通过查找二层交换机端口下学习到的mac地址,然后通过对照三层核心交换 ...