概述

vuejs的过渡效果可以让我们的页面元素在出现和消失时实现过渡。官方文档这样描述过渡效果的方式:

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

简单而言就是,你可以使用vue的<transition></transition>组件,结合css的动画(animation),过渡(transition),或者javascript操作dom来让你的元素或者组件动起来。

而在引用css和javascript中,你可以自己写,也可以利用现成的css或者javascript的第三方库。

css过渡/动画

css过渡就是仅使用transition完成的效果。大概的结构长这个样子:

//html
<transition name="xxx">
<p v-if="show">hello</p>//这里是你要过渡的元素或者组件,包裹在transition标签里
</transition>
//css
.xxx-enter-active {
transition: all .3s ease;
}
.xxx-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.xxx-fade-enter,.xxx-leave-active {
transform: translateX(10px);
opacity: 0;
}

这里出现了一个叫xxx的同学,这就是给过渡组件起的名字,这样,vue就会到css中去找前缀名为xxx的类。并应用在组件里面的元素上面。

这四个css类的后缀名各不相同,分别是

enter,leave,enter-active,和leave-active,

这四个后缀分别代表:

进入过渡开始,离开过渡开始,进入过渡开始到进入过渡结束,离开过渡开始到离开过渡结束。

css过渡说白了就是动态加上和去掉相应的class实现的。比如说下面这个小方块(图片来自vue官网),进入开始时,透明度是0(加上了 .xxx-fade-enter class造成的opacity=0

),中间过程又加上了(.xxx-enter-active)。进入结束时,过渡效果完成,透明度是1,vue把上面加的class都去掉。离开开始时,透明度是1,中间过程加上(xxx-enter-active class)此时元素的css样式如下:

transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
opacity:0;
tansfrom:translateX(10px) 

离开结束时,透明度是0,此时v-if也在起作用,最终是元素从dom中消失,有兴趣的话可以F12看官网的demo,就能豁然开朗了。

css动画

css动画就要用到css3的animation了,对于自己写的动画,用法与上面的过渡基本相同:

<div id="demo">
<button @click="show = !show">
Toggle {{show}}
</button>
<transition name="boom">
<p v-if="show" id='circle'></p>
</transition>
</div> //css
.boom-enter-active{//boom 是过渡名称 in,out是两个动画,动画写到进入和离开结束的class中
animation:in .5s;
}
.boom-leave-active{
animation:out .5s;
}
@keyframes in {//in动画
0% {
transform: scale(2);
opactity:0;
}
50% {
transform: scale(1.5);
opactity:0.5;
}
100% {
transform: scale(1);
opactity:1;
}
}
@keyframes out {//out 动画
0% {
transform: scale(1);
}
100% {
transform: scale(2);
opactity:0;
}
} //js
new Vue({
el: '#demo',
data: {
show: true
}
})

其实日常使用中还是使用css库更方便。这时要用到

  • enter-class
  • enter-active-class
  • leave-class
  • leave-active-class

四个自定义属性,这里说是属性,是因为,这些不是写在css中,而是写在<transition>标签中的属性.使用animate.css库,就在enter-active-class,leave-active-class属性名下填入对应的动画名即可,animated是必须填的。

<transition
enter-active-class="animated rollIn"//属性名=属性值
leave-active-class="animated rollOut"
>
<p v-if="show">hello</p>
</transition>

trainsition mode

transition mode有两种模式

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

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

使用mode时,要注意给trainsiton下面的元素绑定key,否则可能看不到过渡效果

借助过渡模式,我们可以写一个消息滚动条。效果如下:

vue.js之过渡效果-css的更多相关文章

  1. APP---发布动态、朋友圈类似,多张图片动响应式正方形展示布局 vue.js,aui.css,apiclouv

    环境:vue.js,aui.css,apicloud 1.没做控制之前.图片真实长度宽度. 2.下面用js控制高度 js部分 //js 部分 //先动态的获取属性宽度 var box4_col3 = ...

  2. vue.js 独立引用css文件图片路径错误

    vue的环境是用vue-cli,写在vue文件的图片引用build之后的路径都没什么问题 但是有的时候我们会有一些公共的css文件单独的放在assets目录下 如下图所示 这里当build后发现写在c ...

  3. vue.js过渡效果之--javascript钩子

    写在前面 姊妹篇  vue.js之过渡效果-css.今天一篇博文阅读量破300,心里还是有点小激动的.没错,我就是这么容易满足(害羞).这个数据可能连大牛一篇文章阅读量的零头都没有,但这却是我个人的一 ...

  4. Vue.js中css的作用域

    Vue.js中的css的作用域问题: 如果在vue组件下的style中定义样式,效果会作用于整个html页面,如果只想本组件的css样式只作用于本组件的话,在<style>标签里添加sco ...

  5. Vue.js中scoped引发的CSS作用域探讨

    前言 在Vue.js的组件化开发中,常常会对某个组件的style标签加上scoped属性,如<style lang='less' scoped>,这样做的目的在于使这个组件的样式不能轻易在 ...

  6. Vue.js 相关知识(动画)

    1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...

  7. 048——VUE中使用animate.css动画库控制vue.js过渡效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  9. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

随机推荐

  1. jquery禁用下拉框

    禁用下拉框 //下拉框禁用 $("select").each(function () { $("#" + this.id).attr("disable ...

  2. jquery+ajax+struts2

    AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新.编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同.这意味着您必须编写额外的代码对 ...

  3. JDK1.8 HashMap 源码分析

    一.概述 以键值对的形式存储,是基于Map接口的实现,可以接收null的键值,不保证有序(比如插入顺序),存储着Entry(hash, key, value, next)对象. 二.示例 public ...

  4. fluent批量处理——模型参数的设置

    对于常见的工程应用来说,计算的工况很多,尤其优化工作,少则几百,多则上千,面对如此之多的case文件要写,假如按照一个一个的读写的话,相信你一定会为这么机械的工作烦躁,甚至影响今后好几天的心情,那么有 ...

  5. 记录一次bug解决过程:eclipse Installed JREs 配置引出的问题

    一 总结 eclipse Installed JREs 配置引出的问题:编译以来JDK,不是JRE spring boot内嵌tomcat运行程序,tomcat:run 二 Bug描述:eclipse ...

  6. 企业IT架构介绍

    企业信息化之路 问题   互联互通   统一访问 统一身份管理 数据管理模型 企业数据集成业务架构 业务流程框架 业务流程模型 个性流程支持 跨业务的业务流程组合 EBS总线 ] SOA架构上视图 B ...

  7. Spring在web应用中获得Bean的方法

    一:使用ApplicationContext获得Bean 首先新建一个类,该类必须实现ApplicationContextAware接口,改接口有一个方法,public void setApplica ...

  8. AEAI ESB培训大纲

    1. 概述 本文档的目的是为了让使用者能更好的操作.维护.服务于整个ESB系统平台,该信息系统平台不仅需要成熟稳定的产品,更需要技术熟练的运行维护人员,以便能更好地进行科学有效的运行维护工作. AEA ...

  9. SharePoint 2013 Designer 入门教程

    SharePoint的使用中,SharePoint Designer是非常重要的工具,我们可以通过Designer设计页面.母版页,维护.管理站点,也可以定制列表表单.数据视图,设计工作流等等.下面总 ...

  10. iOS开发--Swift RAC响应式编程初探

    时间不是很充足, 先少说点, RAC的好处是响应式编程, 不需要自己去设置代理委托, target, 而是主要以信息流(signal), block为主, 看到这里激动吧, 它可以帮你监听你的事件, ...