Vue中css动画过渡效果(一)

2019年3月16日08:42:03 发表评论 阅读(232)

Vue中css动画过渡效果(一)

我们在很多地方看到过,图片或者文字的淡入淡出效果,那么是怎么做到的呢?

Vue 提供了transition的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡,我们只需要这样写:

  1. <div id="root">
  2.         <button @click="handleClick">点我</button>
  3.         <transition name="fade">
  4.             <p v-show="see"><img src="20180909123311.jpg" /></p>
  5.         </transition>
  6.     </div>
  1. var vm = new Vue({
  2.             el: '#root',
  3.             data: {
  4.                 see: true
  5.             },
  6.             methods: {
  7.                 handleClick: function () {
  8.                     this.see = !this.see
  9.                 }
  10.             }
  11.         })
  1. .fade-enter-active, .fade-leave-active {
  2.             transition: opacity .5s;
  3.         }
  4.         .fade-enter, .fade-leave-to  {
  5.             opacity: 0;
  6.         }

效果

点我查看效果

在控制显示和隐藏transition组件中元素的时候,vue会自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名。

CSS类名

如果你使用一个没有名字的 <transition>,则 v- 是这些类名的默认前缀。如果你使用了 <transition name="fad">,那么 v-enter 会替换为 fad-enter。当然如果我们想要自定义过渡的css类名也是可以的,官方提供了6个可以自定义的特性,在下篇文章会写到具体的内容。

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

Vue中css动画过渡效果(一)

显示流程中的css

  1. fade-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
  2. fade-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
  3. fade-enter-to2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 fade-enter 被移除),在过渡/动画完成之后移除。
  4. 显示是opcity属性从0到1

Vue中css动画过渡效果(一)

隐藏流程中的css

  1. fade-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
  2. fade-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
  3. fade-leave-to2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 fade-leave 被删除),在过渡/动画完成之后移除。
  4. 隐藏是opcity属性从1到0

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
  • A+
所属分类:JS
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛