Vue入门之animate过渡动画效果

简介：

transition方法的使用
transition内置方法
transition-group

animate库实现过渡动画

`<!DOCTYPE html>`
`<html lang=``"en"``>`
`<head>`
`<meta charset=``"UTF-8"``>`
`<meta name=``"viewport"` `content=``"width=device-width, initial-scale=1.0"``>`
`<meta http-equiv=``"X-UA-Compatible"` `content=``"ie=edge"``>`
`<title>Document</title>`
`<script src=``"lib\vue.js"``></script>`
`<link rel=``"stylesheet"` `href=``"lib\animate.css"` `rel=``"external nofollow"` `>`
`<style>`
`[v-cloak] {`
`display: none;`
`}`
欢迎加入全栈开发交流划水交流圈：582735936
面向划水1-3年前端人员
帮助突破划水瓶颈，提升思维能力
`p {`
`width: 100px;`
`height: 100px;`
`background: red;`
`margin: 10px auto;`
`}`
`/* .fade-enter-active, .fade-leave-active {`
`transition: 1s all ease;`
`}`
`.fade-enter-active {`
`opacity: 1;`
`width: 300px;`
`height: 300px;`
`}`
`.fade-leave-active {`
`opacity: 0;`
`width: 100px;`
`height: 100px;`
`}`
`.fade-enter, .fade-leave {`
`width: 100px;`
`height: 100px;`
`opacity: 0;`
`} */`
`</style>`
`<script>`
`window.onload =` `function``() {`
`new` `Vue({`
`el:` `'#box'``,`
`data: {`
`show:` `''``,`
`list: [``'apple'``,` `'banana'``,` `'orange'``,` `'pear'``]`
`},`
`computed: {`
`lists:` `function``() {`
`var` `arr = [];`
`this``.list.forEach(``function``(val) {`
`if` `(val.indexOf(``this``.show) != -1) {`
`arr.push(val);`
`}`
`}.bind(``this``))`
`return` `arr;`
`}`
`}`
`})`
`}`
欢迎加入全栈开发交流划水交流圈：582735936
面向划水1-3年前端人员
帮助突破划水瓶颈，提升思维能力
`</script>`
`</head>`
`<body>`
`<div id=``"box"` `v-cloak>`
`<input type=``"text"` `v-model=``"show"``>`
`<!-- class定义 .fade`
`.fade-enter{}      初始状态`
`.fade-enter-active{}   进入过程`
`.fade-leave{}      离开状态`
`.fade-leave-active{}   离开过程`
`-->`
`<transition-group enter-active-class=``"zoomInLeft"` `leave-active-class=``"bounceOutRight"``>`
`<!-- 内置方法`
`@before-enter =` `"beforeEnter"`
`@enter =` `"enter"`
`@after-enter =` `"afterEnter"`
`@before-leave =` `"beforeLeave"`
`@leave =` `"leave"`
`@after-leave =` `"afterLeave"`
`-->`
`<!-- transition-group 多个元素运动，注意绑定key:1 -->`
`<p v-show=``"show"` `class=``"animated"` `v-``for``=``"(val, index) in lists"` `:key=``"index"``>`
`{{val}}`
`</p> `
`</transition-group>`
`</iv>`
`</body>`
`</html>`|

总结

以上所述是小编给大家介绍的Vue入门之animate过渡动画效果，希望对大家有所帮助

Vue入门之animate过渡动画效果相关推荐

react过渡动画效果的实现,react-transition-group
本文介绍react相关的过渡动画效果的实现有点类似vue的transition组件,主要用于组件mount和unmount之前切换时应用动画效果安装 cnpm install react-tran ...
Flutter ColorTween实现颜色过渡动画效果
志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的 ...
ppt模板页面过渡动画效果怎么制作？
一个好看的ppt模板,动画效果少不了,ppt模板制作软件也带了不少动画效果,ppt家园下面就来介绍一下ppt模板页面过渡动画效果怎么制作? 插入-图片-将两张图片素材导入-一张铺满PPT页面-一张放在 ...
js html页面切换效果,jQuery实现切换页面过渡动画效果
这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效 ...
threejs + vue 倒入ade文件实现动画效果
threejs + vue 倒入ade文件实现动画效果 <template> <div class="modelsBox"><div class=&q ...
js修改display_Vue.js从零开始——过渡 / 动画效果（2）
题图是2013年在 OSRAM 的顶层拍的远景,能看到慕尼黑的高楼大厦不算多,远近也就看到4栋,左上的富士通,右侧远处的奥林匹克公园的高塔还有宝马大厦,最远处的那一栋我不知道是哪里了--这是因为不在老 ...
Vue中的基础过渡动画原理解析
前言在日常开发中动画是必不可少的一部分不仅能让元素直接的切换显得更加自然同时也能极大的增强用户体验因此在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡 ...
Vue 路由知识三(过渡动画及路由钩子函数)
路由的过渡动画:让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性. <transition nam ...
android 颜色过渡动画效果,Android buttom textview 颜色平滑过渡的动画效果
1.TransitionDrawable.例如,在文件夹中绘制一个xml文件,你可以这样写: 然后,在你的xml的实际检视你都引用这个TransitionDrawable在android:backgr ...

Vue入门之animate过渡动画效果

Vue入门之animate过渡动画效果相关推荐

最新文章

热门文章