css过渡

进入/离开 时过渡的类名,有 6 个 class 切换

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

1.html

<transition name="fade">

     <p> hello </p>

</transition>

2.css

.fade-enter-active{

  ...................................

}

.fade-leave-active{

  ....................................

}

css 的类名为 <transition> 中的 “ name 属性 - 过渡类名 ”构成。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概述 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具: 在 CSS 过渡和...
    寒梁沐月阅读 1,400评论 0 3
  • a标签的伪类选择器 a标签的伪类选择器是专门用来修改a标签不同状态下的样式的 格式::link 修改从未被访问过状...
    Strive_12c4阅读 425评论 0 0
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,094评论 0 29
  • 最近因为工作需要,对数据可视化做了一些初步的思考。笔记如下。 1.互联网公司数据部门的数据可视化工作的本质和很多互...
    liupc阅读 415评论 1 5
  • 原创/楠天下的太阳花 『书中自有颜如玉,书中自有黄金屋』,楠天下的太阳花,专注书评,简称【玉屋】系列。 一,成功学...
    楠天下的太阳花阅读 2,410评论 28 112