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 ...
随机推荐
- 一文带你从零认识什么是XLA
摘要:简要介绍XLA的工作原理以及它在 Pytorch下的使用. 本文分享自华为云社区<XLA优化原理简介>,作者: 拓荒者01. 初识XLA XLA的全称是Accelerated Lin ...
- 前端资源共享方案对比-笔记:iframe/JS-SDK/微前端
前端页面资源如何分享,常见的有iframe,其次是js-sdk.这两类的在地图类工具经常用.微前端是最佳比较火的方式.本篇是他们的对比分析. 下一篇讲 BK-VISION如何在让用户自由选择 ifra ...
- 火山引擎A/B测试私有化实践
更多技术交流.求职机会.试用福利,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 作为一款面向 ToB 市场的产品--火山引擎 A/B 测试(DataTester)为了满足客户对数据安全 ...
- 鸿蒙HarmonyOS实战-ArkTS语言（基本语法）
一.ArkTS语言基本语法 1.简介 HarmonyOS的ArkTS语言是一种基于TypeScript开发的语言,它专为HarmonyOS系统开发而设计.ArkTS语言结合了JavaScript的灵活 ...
- GitLab--简单使用
1 创建项目组 项目组说明 Private 私有 只有所有者 组内成员或已分配的用户有查看权限(同GitHub收费版的私有仓库) Internal 内部 拥有GitLab账号的成员可以查看 无账号用户 ...
- 【每日一题】33. 简单瞎搞题 （滚动数组 + bitset 优化DP）
补题链接:Here 这个问题的难点在于如何统计出所有和可能出现的情况,并且不能重复. 很容易想到用桶去存储每一个数,即某个和能够组合出来则为1,否则为0 不妨令 \(dp[i][j]\) 表示为第 \ ...
- oralce用户锁-表锁
一.数据库在使用中,如果多次使用错误密码登录会导致用户锁住无法正常登陆. 解决方法:dba用户登录后使用语句搞定 alter user testuser account unlock; 注:test ...
- 新手学习VUE——环境搭建及创建项目
第一种方式: 1. 下载安装node.js 检查是否成功:node-v或npm-v 2..搭建项目: 第一种方法:用iview脚手架建项目 打开iview官网==>生态 ===>i ...
- C#商品金额大小写转换
见图 代码如下 public string NumToChinese(string x) { //数字转换为中文后的数组 string[] P_array_num = new string[] { & ...
- spring boot 集成配置阿里 Druid监控配置
本文为博主原创,转载请注明出处: github 地址如下:https://github.com/alibaba/druid/wiki 其相关问题也可参考:https://github.com/alib ...