一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

PHP教程 Css教程 操作系统 数据库 安卓下载

首页 游戏下载 软件下载 专题 资讯教程 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
+ -
当前位置：一聚教程网 > 网页制作 > js教程

推荐专题

最新下载

热门教程

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

时间：2022-06-25 15:55:53 编辑：袖梨 来源：一聚教程网

Vue 1.0 动画（自定义动画）

步骤：

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

2.给动画名称写css定义

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

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

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

html 如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="wrap">
 <input type="button" value="按钮" @click="show">
 <div class="box" v-show="isShow" transition="fade"></div>
</div>
.box{
  
   
}
.fade-transition{ /*定义动画的过渡效果*/
 transition:1s all ease;
}
.fade-enter{ /*进入动画*/
 opacity:0;
}
.fade-leave{/*离开的动画*/
 opacity:0;
 transform:translate(200px)
}

js

?
1
2
3
4
5
6
7
8
9
10
11
var vm=new Vue({
  el:'#box',
  data:{
    isShow:true
  },
  methods:{
    show(){
      this.isShow=!this.isShow;
    }
  }
});

vue 1.0 结合animate.css定义动画

页面记得引入animate.cdd

html

?
1
2
3
4
5
<div id="box2">
  <input type="button" value="按钮" @click="show">
  <div id="div2" class="animated" v-show="isShow" transition="bounce">
  </div>
</div>

css

?
1
2
3
4
5
6
#div2{
  
  
 background: red;
 margin: 50px auto;
}

js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var vm2=new Vue({
  el:'#box2',
   data:{
   isShow:true,
   },
   methods:{
    show(){
     this.isShow=!this.isShow;
    }
  },
  transitions:{
   bounce:{
     enterClass:"zoomInLeft",
     leaveClass:"zoomInRight"
   }
  }
 })

相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2022 www.111CN.NET AII Right Reserved

网站内容来自网络整理或网友投稿如有侵权行为请邮件:111cn.com@163.com 我们24小时内处理