自定义过渡
可以配合使用第三方CSS库, 如
Animate.css
效果地址:
https://animate.style/
eg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自定义动画</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<button type="button" @click="isShow=!isShow">点击</button>
<!-- 标签transition -->
<transition enter-active-class="animated rubberBand"
leave-active-class="animated rubberBand" mode="out-in" >
<p v-if="isShow" key="1"> hello Vue </p>
<p v-else="isShow" key="2"> hello lnmp </p>
</transition>
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
isShow:true,
},
components:{
},
methods:{
}
});
</script>
4063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
