<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. HNU13303 Counting substhreengs(递推)

    题目:http://acm.hnu.cn/online/? action=problem&type=show&id=13303&courseid=0 题意:给你一个字符串,由数 ...

  2. IDEA创建maven项目之后无法编写java类

    在创建Maven web项目之后无法再java文件夹下面创建java类,这里我可以教一下大家 选择你的文件夹,鼠标点击右键,出现下图所显示的,你可以按照下图所显示的步骤进行操作

  3. TortoiseSvn安装的时候，将svn的命令行工具单独隔离出来

    https://stackoverflow.com/questions/2967176/where-is-svn-exe-in-my-machine The subversion program co ...

  4. Android View体系（九）自定义View

    相关文章 Android View体系(一)视图坐标系 Android View体系(二)实现View滑动的六种方法 Android View体系(三)属性动画 Android View体系(四)从源 ...

  5. CentOS7 启动[root@localhost ~]# systemctl start docker Job for docker.service failed because the control process exited with error code. See "systemctl status docker.service" and "journalctl -xe" for de

    1).在linux虚拟机上安装docker步骤:1.检查内核版本,必须是3.10及以上uname ‐r2.安装dockeryum install docker3.输入y确认安装4.启动docker[r ...

  6. IDEA 官方教程

    https://www.jetbrains.com/help/idea/discover-intellij-idea.html#UserInterface

  7. 【Henu ACM Round#14 F】 President and Roads

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 处理出起点到任意点的最短路以及最短路条数=>dis[0][i],cnt[0][i] 然后 把所有的边反向 处理出在反图上终点到 ...

  8. Safe and efficient allocation of memory

    Aspects of the present invention are directed at centrally managing the allocation of memory to exec ...

  9. SQL 自增列清零方法

    SQL Identity自增列清零方法1.使用DBCC控制台命令: dbcc checkident(表名,RESEED,0) 2.truncate table 也可将当前标识值清零 但当有外键等约束时 ...

  10. 阿里云server改动MySQL初始password---Linux学习笔记

    主要方法就是改动 MySQL依照文件以下的my.cnf文件 首先是找到my.cnf文件. # find / -name "my.cnf" # cd /etc 接下来最好是先备份my ...