<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. POJ - 3846 Mountain Road 动归

    POJ - 3846 Mountain Road 题意:n个人要过桥,有的人从左边来,有的人从右边来,给你他们到达桥一端的时间和过桥所需要的时间,要求相向而行的只能有一人,对于每一个点,不能在10s内 ...

  2. HTTP 各种特性应用（一）

    一. CORS 预请求 允许方法: GET. HEAD. POST 这三个方法 不需要预请求. 允许 Content-Type text/plain. multipart/form-data. app ...

  3. "中国制造2025"+"互联网+"，引领制造业发展

    "中国制造2025"+"互联网+",引领制造业发展

  4. 紫书 例题 9-8 UVa 1625 (滚动数组+公共字符串处理）

    这题看题解看了很久,学到了挺多(自己还是太弱,唉!) (1)这道题的思路非常的巧妙.我一开始看到就觉得不好来记录开始位置以及 结束位置.但是题解换了一个思路,记录每一次开始了但还没有结束的字符有多少个 ...

  5. html的学习思维导图

  6. BZOJ 4582 贪心

    思路: 显然是个贪心 排个序 然后扫几遍就好了 (重叠的区间不能取) //By SiriusRen #include <cstdio> #include <algorithm> ...

  7. Android 将HTML5封装成android应用APK文件的几种方法

    越来越多的开发者热衷于使用html5+JavaScript开发移动Web App.不过,HTML5 Web APP的出现能否在未来取代移动应用,就目前来说,还是个未知数.一方面,用户在使用习惯上,不喜 ...

  8. 码农Coding Peasant(s)：一般指从事没有发展前景的软件开发职位

    码农Coding Peasant(s):一般指从事没有发展前景的软件开发职位,这种职位只能强化职业者在单方面的技术领域技能,学不到新技术,同时也是部分从事软件开发工作人员的一个自嘲的称号.一个依靠写代 ...

  9. C# 爬虫总结

    static void Main(string[] args) { //WebRequest request = WebRequest.Create("http://www.cnblogs. ...

  10. ErrorSet

    1.获取路径的失误: 例子是对一个列表项的悬浮操作: ~(function() { var lists = $(".footer_log>li"); lists.each(f ...