优德娱乐场w88手机版:一个值得你收藏的教程网站

最新下载

vue 1.0 结合animate.css定义动画效果

时间:2018-07-13 10:51:18 编辑:猪哥 来源:转载

Vue 1.0 动画(自定义动画)

步骤:

1.给当前动画元素添加‘transition'属性  其值就是动画名称(假如:fade)

2.给动画名称写css定义

a: .fade-transition{/*定义动画过渡*/   transition:1s  all ease;}

b: .fade-enter{/*定义进入动画  注意:进入离开最终一样*/}

c:fade-leave{/*定义离开动画*/}

html 如下:

 
 

.box{
 width:100px;
 height:100px; 
}
.fade-transition{ /*定义动画的过渡效果*/
 transition:1s all ease; 
}
.fade-enter{ /*进入动画*/
 opacity:0; 
}
.fade-leave{/*离开的动画*/
 opacity:0;
 transform:translate(200px) 
}

js

var vm=new Vue({
  el:'#box',
  data:{
    isShow:true
  },
  methods:{
    show(){
      this.isShow=!this.isShow;
    }
  }
});

vue 1.0 结合animate.css定义动画

页面记得引入animate.cdd

html

  
  
  

css

#div2{
 width: 100px;
 height: 100px;
 background: red;
 margin: 50px auto;
}

js

var vm2=new Vue({
  el:'#box2',
   data:{
   isShow:true,
   },
   methods:{
    show(){
     this.isShow=!this.isShow;
    }
  },
  transitions:{
   bounce:{
     enterClass:"zoomInLeft",
     leaveClass:"zoomInRight"
   }
  }
 })

文章评论

热门栏目

XML 地图 | Sitemap 地图