当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue 1.0 结合animate.css定义动画效果

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

2018年08月08日  | 移动技术网IT编程  | 我要评论

vue 1.0 动画（自定义动画）

步骤：

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

2.给动画名称写css定义

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

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

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

html 如下：

<div id="wrap">
 <input type="button" value="按钮" @click="show">
 <div class="box" v-show='isshow' transition='fade'></div>
</div>
.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

<div id="box2">
  <input type="button" value="按钮" @click='show'>
  <div id="div2" class="animated" v-show='isshow' transition="bounce">
  </div>
</div>

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"
   }
  }
 })

总结

以上所述是小编给大家介绍的vue 1.0自定义动画效果，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网