简介:
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>`
- |
总结
来源: http://www.qdfuns.com/article/51116/809d107f4885f78dd6ff47cb30c40ba9.html