Vue入门之animate过渡动画效果_Vue.js

上一篇: vue 使用lib-flexable，px2rem 进... 下一篇:前端-优雅的VueJS

Vue入门之animate过渡动画效果

发布时间：2019-05-26 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了Vue入门之animate过渡动画效果，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

简介：

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

animate库实现过渡动画

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年前端人员帮助突破划水瓶颈，提升思维能力 `` `` `` `

` `` `` `` `` `` `

` `{{val}}` `

` `` `` `` `` |" title="" data-original-title="复制">

`<!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=``"libvue.js"``></script>`
`<link rel=``"stylesheet"` `href=``"libanimate.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过渡动画效果全部内容，希望文章能够帮你解决Vue入门之animate过渡动画效果所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：Vue

上一篇: vue 使用lib-flexable，px2rem 进... 下一篇:前端-优雅的VueJS

猜你在找的Vue.js相关文章

Vue 3.0 风格指南 2024-10-19
Vue-SuperSlide(SuperSlide component for Vue) 2019-05-07
基于vue2.0的weex实践（前端视角） 2019-05-07
手把手教你写 Vue UI 组件库@vue2.0 2019-05-07
解决vue报错Failed to mount component 2019-05-07
Vue学习笔记之vue-cli项目搭建及解析 2019-05-07
Vue.js—单元测试 2019-05-07
vue2.0脚手架的安装和项目搭建 2019-05-07
Vue经典开源项目汇总demo实例github下载教程 2018-12-04
使用Vue.js构建Wordpress Gutenberg块 2018-11-17

全站导航更多

最新Vue.js教程

热门Vue.js教程