Vue中的动画封装

发布时间:2019-11-13 23:12:16 作者:tianxiang1314 阅读量:215

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue中的动画封装</title>
<script src="vue/vue.js"></script>
<style type="text/css">
.v-enter{
opacity: 0;
}
.v-enter-active{
transition: opacity 4s;
}
</style>
</head>
<body>
<div id="app">
<fade :show="show">
<div>hello word</div>
</fade>
<fade :show="show">
<div>hello555555word</div>
</fade>
<button @click="change">添加</button>
</div>
<script type="text/javascript">
   Vue.component('fade',{
   props:['show'],
   template:"<transition @before-enter='beforeEnter' @enter='enter' @after-enter='afterEnter'><slot v-if='show'></slot></transition>",
       methods:{
   beforeEnter:function(el){
   el.style.color="red";
   },
   enter:function(el,done){
setTimeout(()=>{
  el.style.color="green";
},4000)
setTimeout(()=>{
done()
},4000);
   },
   afterEnter:function(el){
    console.log('end');
   }
   }
   })
var app = new Vue({
el:"#app",
data:{
show:true
},
methods:{
change:function(){
this.show = !this.show;
}
}
});
</script>
</body>
</html>

我要评论 登录后才能发布评论

推荐阅读

 2019-11-06 21:47:19   tianxiang1314

vue.js定义全局组件

 2019-12-24 22:18:53   tianxiang1314

vue.js返回上一级操作

 2019-12-22 10:03:19   tianxiang1314

Xshell拖拽文件到linux...

 2019-12-18 21:21:06   tianxiang1314

把数据保存到数据库附加表 `de...

 2019-12-14 10:49:37   tianxiang1314

JavaScript 实现九宫格...

 2019-12-10 21:04:30   tianxiang1314

vuex使用方式(实现非父子组件...

 2019-12-05 22:30:18   tianxiang1314

better-scroll滚动无...

胡晓飞笔记   我要留言
Catfish(鲶鱼) CMS V 4.9.63