Vue.js动画在项目使用的两个示例
2017-04-19 13:07
811 查看
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~
李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js、vue.js等技术,热爱新技术,热爱编程。
下面就进入正题啦!
鼠标点击button会切换一个布尔值show,用show来控制弹出层的显示,而包裹着
关于不同的过渡状态对应的css声明,官网上是这样解释的:
相对于jQuery来说,
那么如何点击其他区域让弹出层消失呢?
首先想到的是直接阻止按钮和弹出层的事件冒泡,然后给document绑定事件让弹出层消失。但是显然这种方法太简单粗暴了,使用的场景也很苛刻,要求页面中只有一个弹出层效果才行,虽然不建议使用,但是也提供了一种思路。
然后想到可以检验事件的target,如果target不是按钮和弹出层就可以让弹出层消失,这也是用jQuery 的常用写法,那么关键点就是用
这里定义了一个生命周期钩子mouted,也就是说在该vue实例绑定节点之后触发,在document绑定的事件里判断是不是按钮和弹出层,如果是则返回,否则将show的状态设置为false。
在写完这个之后我也去网上找了找有没有更好的思路可以实现,后来阅读了一下大名鼎鼎的
这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个单选按钮的兄弟节点,再用绝对定位把单选按钮定位在三个button上面,这样就可以用:checked伪类来单选按钮的兄弟元素,即对应的不同的层,我简单的写了一下DOM结构,大概就是这样:
那么用
如果数据量并不复杂的话,可以直接通过
首先先把template和css写好:
其中introduce、chatbar、videobar分别代表三个需要跟随button切换的组件,接下来就可以给
点击不同的button,会让active的状态改变,同时这个状态会作用到button上面,比如让被点击的button有个高亮的效果等等。
那么如何让active的状态作用到弹出层呢?其实定义一个computed函数就可以了:
大功告成!
好了,就说到这里啦,第一次发这么长的文章,贴出来的代码可能不能面面俱到,如有不足之处,欢迎各位大神们指教,给点个赞吧啦啦啦啦!
Three.js camera初探——转场动画实现
李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js、vue.js等技术,热爱新技术,热爱编程。
vue.js的文档对于动画的使用做了很多的介绍,不熟悉的小伙伴可以先了解一下。
下面就进入正题啦!
第一个动画示例:
这其实是一个很常见的弹出层效果,鼠标点击按钮切换弹出层的显示,点击其他区域弹出层消失,用javascript绑定事件可能几行代码就搞定了,但是vue.js的状态驱动模式和javascript的事件驱动模式是不同的,下面是使用
vue.js的实现方式:
鼠标点击button会切换一个布尔值show,用show来控制弹出层的显示,而包裹着
<transition>标签的弹出层在show的状态改变时就会触发动画,下面就可以用css3写一个弹出层的动画:
关于不同的过渡状态对应的css声明,官网上是这样解释的:
v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效,在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。
v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效,在 transition/animation 完成之后移除。
相对于jQuery来说,
vue.js的动画效果完全带来了一种全新的体验。
那么如何点击其他区域让弹出层消失呢?
首先想到的是直接阻止按钮和弹出层的事件冒泡,然后给document绑定事件让弹出层消失。但是显然这种方法太简单粗暴了,使用的场景也很苛刻,要求页面中只有一个弹出层效果才行,虽然不建议使用,但是也提供了一种思路。
然后想到可以检验事件的target,如果target不是按钮和弹出层就可以让弹出层消失,这也是用jQuery 的常用写法,那么关键点就是用
vue.js定位到按钮和弹出层,
vm.$refs可以解决这个问题,使用 ref 为子组件指定一个索引 ID,在 JavaScript 中就可以直接访问子组件了。下面是实现过程:
这里定义了一个生命周期钩子mouted,也就是说在该vue实例绑定节点之后触发,在document绑定的事件里判断是不是按钮和弹出层,如果是则返回,否则将show的状态设置为false。
在写完这个之后我也去网上找了找有没有更好的思路可以实现,后来阅读了一下大名鼎鼎的
vue.js框架Element这部分的源码,发现它也是这个思路实现了。大家有好的实现思路欢迎交流哈!
第二个动画示例:
第二个实例是关于标签页切换的,先看一下效果:这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个单选按钮的兄弟节点,再用绝对定位把单选按钮定位在三个button上面,这样就可以用:checked伪类来单选按钮的兄弟元素,即对应的不同的层,我简单的写了一下DOM结构,大概就是这样:
那么用
vue.js实现上述的效果,其实也有两种途径,一种使用
vue-router,
vue-router是
vue.js的一个路由组件,在单页面应用中非常非常流行,如果切换的层数据量非常大的话,比如每个层都要有服务器进行大量的数据交互,那么强烈建议使用
vue-router,因为
vue-router在每次切换路由的过程中,都会自动销毁(destroyed)前面的组件,这样在频繁的操作中页面也不会卡,而且
vue-router也定义了页面切换过程中的过渡动画。
如果数据量并不复杂的话,可以直接通过
vue.js定义切换状态来切换不同的层。
首先先把template和css写好:
其中introduce、chatbar、videobar分别代表三个需要跟随button切换的组件,接下来就可以给
vue.js的button节点绑定事件来操控点击状态:
点击不同的button,会让active的状态改变,同时这个状态会作用到button上面,比如让被点击的button有个高亮的效果等等。
那么如何让active的状态作用到弹出层呢?其实定义一个computed函数就可以了:
大功告成!
好了,就说到这里啦,第一次发这么长的文章,贴出来的代码可能不能面面俱到,如有不足之处,欢迎各位大神们指教,给点个赞吧啦啦啦啦!
相关推荐
Vue.js 2.0源码解析之前端渲染篇Three.js camera初探——转场动画实现
相关文章推荐
- Vue.js动画在项目使用的两个示例
- Vue.js动画在项目使用的两个示例
- jquery.fileupload.js插件使用--前两篇日志中两个类的使用示例
- 使用vue.js实现联动效果的示例代码
- 如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)
- 使用Django + Vue.js快速而优雅地构建前后端分离项目
- vue之mapMutaions的使用 && vuex中 action 用法示例 && api.js的使用
- Vue.js:使用vue-cli快速构建项目
- 在vue项目中使用element-ui的Upload上传组件的示例
- Django+Vue.js搭建前后端分离项目的示例
- vue.js使用钩子函数实现动画效果
- 如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
- vue2.0使用Sortable.js实现的拖拽功能示例
- vue2.0项目中使用Ueditor富文本编辑器示例
- vue.js 使用axios实现下载功能的示例
- vue2.0项目中使用Ueditor富文本编辑器示例
- 如何制作Vuejs组件,并且在项目中使用
- 解决“UIkit与Vue.js结合使用时,UIkit的图标会显示两个”的问题
- Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
- 前端架构之路:使用Vue.js开始第一个项目