简介：
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过渡动画效果，希望对大家有所帮助
