<body>

  <div id="app">

    <input type="button" value="Add to Cart" @click="flag=!flag">

    <transition

    @before-enter="beforeEnter"

    @enter="enter"

    @after-enter="afterEnter">

    <!-- 这里 @after-enter="afterEnter"  后面不要加括号。

      不加括号，表示直接调用这个方法。

      加括号 表示调用 方法的完成之后的取值。 -->

      <div class="ball" v-show="flag"></div>

    </transition>

  </div>

  <script>

  var vm = new Vue({

    el:'#app',

    data:{

      flag: false, // 这里是布尔值，不是字符串，不要加引号。

    },

    methods: {

      beforeEnter(el){

        // el.style.transition = transform(0, 0);

        el.style.transform = 'translate(0, 0)'

      },

      enter(el, done){

        el.offsetWidth;

        // el.style.transition = transform(100, 450);

        // el.style.opacity = 0;

        el.style.transform = 'translate(150px, 450px)';

        el.style.transition = 'all 1s ease';

        done();

      },

      afterEnter(el){

        this.flag =! this.flag;

      },

    },

  });

  </script>

</body>

VUE错误记录 - 小球模拟购物车的更多相关文章

  1. vue 错误记录

    1.错误信息: You may use special comments to disable some warnings.Use // eslint-disable-next-line to ign ...

  2. Vue 错误记录：Cannot read property 'beforeRouteEnter' of undefined

    点击某路由链接,页面提示: Cannot read property 'beforeRouteEnter' of undefined 查看代码并无手写beforeRouterEnter设置, 把页面内 ...

  3. VUE错误记录 - 品牌后台练习 search(); 数组 splice forEach push 箭头函数

    methods:{ add(){ var car = { id: this.id, name: this.name, ctime: new Date()}; this.list.push(car); ...

  4. vue错误记录

    启动时报错如下 D:\QQFile\\FileRecv\industry_vue>cnpm run dev > vue_demo@ dev D:\QQFile\\FileRecv\indu ...

  5. 使用vue模拟购物车小球动画

    使用vue模拟购物车小球动画 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> < ...

  6. Vue 问题记录

    Vue 问题记录 汇总日常开发中遇到的关于vue的问题 VeeValidator 语言设置 校验消息默认是英文的,定义中文或其他语言的错误提示消息 import VeeValidate from 'v ...

  7. uploadify插件Http Error（302）错误记录（MVC）

    由于项目(asp.net MVC)需要做一个附件上传的功能,使用的是jQuery的Uploadify插件的2.1.0版本,上传文件到自己项目指定的文件夹下面.做完之后,在谷歌上测试是正确的,在火狐上报 ...

  8. 开发错误记录8：Unable to instantiate application com

    开发错误记录8:Unable to instantiate application com.android.tools.fd.runtime.BootstrapApplication 这是因为在And ...

  9. PHP 错误与异常 笔记与总结（5）配置文件中与错误日志相关的选项 && 将错误记录到指定的文件中

    [记录错误(生产环境)] php.ini: ① 开启 / 关闭 错误日志功能 log_errors = On ② 设置 log_errors 的最大字节数 log_errors_max_len = 其 ...

随机推荐

  1. Haproxy压测

    目的:测试Haproxy压测情况 环境: Ha服务器:8核16G虚机,后端6个2核4G,压测客户端3个2核4G 安装和优化: 一.Haproxy #cd /opt/soft #wget http:// ...

  2. Spring MVC -- UEditor 编辑器整合入门

    仅作为入门测试...... 下载UEditor资源 使用maven项目 <!-- 上传文件的支持 --> <dependency> <groupId>commons ...

  3. 洛谷P2415 集合求和

    题目描述 给定一个集合s(集合元素数量<=30),求出此集合所有子集元素之和. 输入输出格式 输入格式: 集合中的元素(元素<=1000) 输出格式: 和 输入输出样例 输入样例#1: 2 ...

  4. excel导入数据的

    .aspx 文件 <form id="form1" runat="server"> <div> <asp:FileUpload I ...

  5. Android ScrollView滚动实现大众点评、网易云音乐评论悬停效果

    今天听着网易云音乐,写着代码,真是爽翻了. http://blog.csdn.net/linshijun33/article/details/47910833 网易云音乐这个产品亮点应该在评论这一模块 ...

  6. SQL Server 为代码减负之存储过程

        存储过程能够用来提高数据库的查询效率.由于它事先被编译过.被储存于内存中,每次执行前.不必被从新编译,所以效率非常高. 存储过程是一组sql增删改查的集合,假设程序中的一个功能涉及到对数据库的 ...

  7. HDU1788 Chinese remainder theorem again【中国剩余定理】

    题目链接: pid=1788">http://acm.hdu.edu.cn/showproblem.php?pid=1788 题目大意: 题眼下边的描写叙述是多余的... 一个正整N除 ...

  8. zoj 2778 - Triangular N-Queens Problem

    题目:在三角形的棋盘上放n皇后问题. 分析:找规律题目.依照题目的输出,能够看出构造法则: 先填奇数,后填偶数.以下我们仅仅要证明这样的构造的存在性就可以. 解法:先给出集体构造方法,从(1.n-f( ...

  9. Onvif开发之基础介绍篇

    什么是Onvif协议,谁开启了Onvif时代? ONVIF:原意为 开放型网络视频接口论坛,即 Open Network Video Interface Forum ,是安讯士.博世.索尼等三家公司在 ...

  10. 9.Java通过axis调用WebService

    转自:https://www.cnblogs.com/fu-yun/p/4553685.html 包含:axis.jar,commons-discovery.jar,commons-logging-1 ...