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 ...
随机推荐
- 10亿数据、查询<10s，论基于OLAP搭建广告系统的正确姿势
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 由于流量红利逐渐消退,越来越多的广告企业和从业者开始探索精细化营销的新路径,取代以往的全流量.粗放式的广告轰炸 ...
- 火山引擎云原生数据仓库 ByteHouse 技术白皮书 V1.0 （Ⅳ）
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,<火山引擎云原生数据仓库 ByteHouse 技术白皮书>正式发布.白皮书简述了 ByteHou ...
- Java 17 从 Solon 开始入手，v1.10.0
相对于 Spring Boot 和 Spring Cloud 的项目: 启动快 5 - 10 倍. (更快) qps 高 2- 3 倍. (更高) 运行时内存节省 1/3 ~ 1/2. (更少) 打包 ...
- C# 使用SqlDataAdapter和DataSet来访问数据库
使用SqlDataAdapter和DataSet来访问数据库 报:已有打开的与此 Command 相关联的 DataReader,必须首先将它关闭 解决方法,使用 using 包住 connectio ...
- Tomcat--安装&&配置文件
配置信息 centos:7.8 tomcat:7.0.3 jdk:1.8 1 部署java环境 [root@localhost ~]# tar xvf jdk-8u181-linux-x64.tar. ...
- C++ lambda 内 std::move 失效问题的思考
最近在学习 C++ Move 时,有看到这样一个代码需求:在 lambda 中,将一个捕获参数 move 给另外一个变量. 看似一个很简单常规的操作,然而这个 move 动作却没有生效. 具体代码如下 ...
- Python 使用pip或easy_install或手动安装库/模块/软件包
pip是easy_install的改进版,提供更好的提示信息,删除package等功能.老版本的python中只有easy_install,没有pip.本文主要介绍使用pip或easy_install ...
- VMware15.5安装Ubuntu20.04
一.安装前的准备 1.下载好Ubuntu20.04的镜像文件,直接从官网下载就好,激活密匙. 2.准备好VMware软件,这里就忽略安装过程了. 二.建立虚拟机以及开启正式的Ubuntu安装过程 参考 ...
- Educational Codeforces Round 107 (Rated for Div. 2) 个人题解（A~D）
补题链接:Here 1511A. Review Site 题意:\(n\) 个影评人,\(a_i\) 有三种类型,如下 \(a_i = 1\) ,则表示支持 \(a_i = 0\) ,则表示不支持 \ ...
- 简易机器学习笔记（九）LeNet实例 - 在眼疾识别数据集iChallenge-PM上的应用
前言 上一节大概讲了一下LeNet的内容,这一章就直接来用,实际上用一下LeNet来进行训练和分类试试. 调用的数据集: https://aistudio.baidu.com/datasetdetai ...