Vue入门之animate过渡动画效果
程序员文章站
2024-03-25 12:12:22
...
简介：
- 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过渡动画效果，希望对大家有所帮助