Vue入門之animate過渡動畫效果

時間 2019-11-16

標籤 vue 入門 animate 過渡動畫效果简体版

原文原文鏈接

簡介：css

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

animate庫實現過渡動畫html

`<!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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。