[原]浅谈vue过渡动画,简单易懂
2017-06-26 17:22
429 查看
在vue中什么是动画
开始先啰嗦一下,动画的解释(自我理解😢)在一个标签里面的类容,我们视觉看到它,这时候,这个标签以什么形式出现,中间变化了什么,并且以什么形式消失,是有一个过渡的存在的方式,我叫做动画
(不是那种干出,干消失哈😁,大神原谅我粗糙的说辞\(^o^)/~)
闲言碎语不多讲,上干货了
在vue中,提供给我们一个很好写过渡动画的内置组件transition
基本用法就是给我们需要动画的标签外面嵌套transition标签,并且给上属性,起码name不要忘了<transition name="fade"> <!-- 需要动画的div标签 --> <div></div> </transition>
这时候,我们命名了这个动画的名字叫fade
vue给动画配置了4个类名来控制动画的变化自由
[b]v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。[/b]
[b]v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效,在 transition/animation 完成之后移除。[/b]
[b]v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。[/b]
[b]v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效,在 transition/animation 完成之后移除。[/b]
下面,我给你看一下动画运行的解释的图
现在上这几个类名代码了此时动画配置就完成了
/* 开始过渡阶段,动画出去阶段 */ .fade-enter-active,.fade-leave-active{ transition: all 0.5s ease-out; } /* 进入开始 */ .fade-enter{ transform: translateY(-500px); opacity: 0; } /* 出去终点 */ .fade-leave-active{ transform: translateY(500px); opacity: 0; }
开始时候 动画透明度为0,并且在Y轴的-500px的位置,(all是css只要改变就发生变化),中间控制动画运行总时长0.5秒,并且以ease-out曲线形式发生动画样子,最后出时候透明度为0
并且跑到在Y轴的500px的位置
这就是说,这个动画用0.5s以ease-out曲线形式从Y轴-500px到+500px!
相关文章推荐
- vue 简单动画过渡
- 简单谈谈vue的过渡动画(推荐)
- Android 补间动画,具体介绍了透明度、平移,旋转,缩放4种动画效果的实现,简单易懂
- vue过渡动画
- Vue之过渡动画
- 浅谈Block--简单易懂
- vue过渡动画效果学习总结
- vue项目转换成pdf文件(简单易懂)
- (六)vue开发 - transition之页面切换过渡动画
- Vue 过渡(动画)transition组件案例详解
- vue学习第11天,过渡 动画 过渡模式
- Vue过渡(动画)- transition组件
- 简单易懂Android之Animation(动画)及Activity动画跳转
- 浅谈Java成员变量与属性的区别(简单最易懂的解释)
- Vuejs——(7)过渡(动画)
- Vue相关(过渡动画)
- vue学习第10天,过渡 动画
- Vue.js每天必学之过渡与动画
- 浅谈属性动画简单使用之实现爱的贝塞尔曲线浪漫告白效果(三)
- Vue入门之animate过渡动画效果