vue 半场动画进入状态
<style>
.box{
width: 30px;
height: 30px;
border-radius: 50%;
background: red;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="加入购物车" @click="flag=!flag">
<!-- 使用元素把小球包裹起来 -->
<!-- @before-enter 动画入场之前，此时还没有入场哈
@enter 表示动画的执行时候的状态
@after-enter 表示动画结束之后的状态
-->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="box" v-show="flag"></div>
</transition>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
flag: false
},
methods: {
//动画钩子函数的第一个参数el 表示要执行的动画的那个DOM元素 是一个原生的BOM对象
// 大家可以认为 el 是通过 document.getElementById来获取的哦
beforeEnter(el){ //beforeEnte表示动画入场之前 此时动画还没有完全的开始
// 此时设置开始动画之前的起始样子
el.style.transform="translate(0,0)"
},
enter(el,done){// enter表示动画开始之后的样子
el.offsetWidth //这一句话没有实际性的作用 但是如果不写 效果就出不来
// 你可以认为 el.offsetWidth 是让你看见动画的效果
el.style.transform="translate(150px,450px)"
el.style.transition="all 1s ease"
//这里的done 起始就是afterEnter这个函数， 也就是说done是afterEnter函数的引用 它就会自动调用下面这个函数
done()
},
afterEnter(el){
// 动画完成之后 就会调用这个函数
this.flag=!this.flag //最终让这个小球消失 取反 让小球消失
}
},
})
</script>
vue 半场动画进入状态的更多相关文章
- vue移动端转场动画
vue移动端转场动画 1.介绍:使用vue移动端做项目的时候,为了用户的体验良好,我们需要页面有一种进入和转出的效果 // 在App.vue根组件中 <template> <div ...
- vue-router自动判断左右翻页转场动画
前段时间做了一个移动端spa项目,技术基于 :vue + vue-router + vuex + mint-ui 因为使用了vue-cli脚手架的webpack模版,所有页面都以.vue为后缀的文件作 ...
- CATransition自定义转场动画
我们可以通过CATransiton来自定义一些漂亮的转场动画, CATransition继承自CAAnimation, 所以用法跟CAAnimation差不多 先直接上一个代码: #import &q ...
- CATransition转场动画
背景: 最近在温习动画,分享个简单系统的转场动画 viewcontroller *VC=[self.storyboard instantiateViewControllerWithIdentifier ...
- iOS开发UI篇—核心动画(转场动画和组动画)
转自:http://www.cnblogs.com/wendingding/p/3801454.html iOS开发UI篇—核心动画(转场动画和组动画) 一.转场动画简单介绍 CAAnimation的 ...
- 图片浏览（CATransition）转场动画
Main.storyboard ViewController.m // // ViewController.m // 8A04.图片浏览(转场动画) // // Created by huan ...
- Android Activity和Fragment的转场动画
Android Activity和Fragment的转场动画 Activity转场动画 Activity的转场动画是通过overridePendingTransition(int enterAnim, ...
- Swift开发小技巧--自定义转场动画
自定义转场动画 个人理解为重写了被弹出控制器的modal样式,根据自己的样式来显示modal出来的控制器 例:presentViewController(aVC, animated: true, co ...
- 捉襟见肘之TableView的手势（删除、编辑等）与转场动画手势冲突
在使用PresentModel的方式进行转场动画时,出现UIPercentDrivenInteractiveTransition和 UITableView的自带手势冲突,问题需要总结,今天系统复习和总 ...
- CATransition-转场动画
CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点 UINavigationController就是通过CATrans ...
随机推荐
- Cesium球心坐标与本地坐标系经纬转换的数学原理—矩阵变换
之前整理过:<透析矩阵,由浅入深娓娓道来-高数-线性代数-矩阵>.<三维旋转笔记:欧拉角/四元数/旋转矩阵/轴角-记忆点整理>,这次转载 FuckGIS的<Cesium之 ...
- App加固中的代码混淆功能，让逆向工程师很头疼
App加固中的代码混淆功能,让逆向工程师很头疼 "我想离开浪浪山." 在数次尝试破解某个App 时,某个逆向工程师无奈感慨道. 逆向工程师顾名思义就是把一个个完整的软件逆推 ...
- iOS IPA包的制作和上传步骤详解
目录 前言 一.IPA包的原理 二.IPA包上传的步骤 1.注册开发者账号 2.创建应用程序 3.编码和设计 4.生成证书和配置文件 5.打包IPA包 6.上传IPA包 三.总结 前言 iOS IPA ...
- iOS应用上架详细图文教程
App Store作为苹果官方的应用商店,审核严格周期长一直让用户头疼不已,很多app都"死"在了审核这一关,那我们就要放弃iOS用户了吗?当然不是!本期我们从iOS app上 ...
- 开心档之MySQL 导入数据
MySQL 导入数据 本章节我们为大家介绍几种简单的 MySQL 导入数据命令. 1.mysql 命令导入 使用 mysql 命令导入语法格式为: mysql -u用户名 -p密码 < 要导入的 ...
- PPT 放映电脑Office版本低怎么办
转换成全图形PPT 转成图片,无法放动画 转换成全视频 转成视频,无法控制节奏 PPT VIEWEB 本地PPT播放工具
- 【win10 系统】idea 修改 Git 密码和账号方法
https://my.oschina.net/anxiaole/blog/1588664
- excel如何自动获取本周工作日的日期显示作为标题（周一至周五）
一.背景: 每周发周报的标题格式为:本周一到本周五的日期内容,如下:但是每隔一周发送的时候需要改一下周报标题里面的日期,比较麻烦目前的需求是通过函数自动化生成,根据当前的日期去定位出本周一的日期以及本 ...
- Java循环标签
大家是否见过这种for循环,在for循环前加了个标记的: outerLoop: for (; ; ) { for (; ; ) { break outerLoop; } } 我之前有一次在公司业务代码 ...
- 你和时间管理大师，就差一个开源工具「GitHub 热点速览」
在这个快节奏的生活中,我们努力地在平衡工作.生活和个人发展,但常常感到时间不够用.如何在繁忙的日程中找到一丝丝"喘息"的机会,这个名叫 cal.com 开源项目能让你更轻松地管理日 ...