美文网首页
vue如何使用连续动画

vue如何使用连续动画

作者: 前端划水工 | 来源:发表于2018-06-20 15:19 被阅读0次

在这里我使用的是animejs
首先通过npm install animejs --save
然后在通过import导入 import anime from 'animejs'
在vue的methods中自定义方法
比如

go () {
        return new Promise((resolve) => {
          anime({
            targets: this.$el,
            rotateY: [0, 360],
            duration: 100,
            easing: 'easeInOutQuart',
            complete: () => {
              anime({
                targets: this.$el,
               rotateY:  [0, 120],,
                complete: () => {
                  resolve(true)
                }
              })
            }
          })
        })
      }

用法是-动画首先执行按y轴旋转360度,在该动画执行完成之后再执行动画按y轴旋转120度
使用起来很方便!!

相关文章

  • vue如何使用连续动画

    在这里我使用的是animejs首先通过npm install animejs --save然后在通过import导...

  • 在Vue中使用Animate.css库

    在Vue中如何使用keyframs的动画 2.Vue中使用Animate.css库使用animate[https:...

  • 在Vue中使用动画

    About 之前写过一篇博客:在Vue中使用css动画,里面没讲如何使用JavaScript钩子函数来控制动画效果...

  • Vue中的动画

    Vue动画 Vue动画API 定义不同的名称动画 第三方动画库Animate.css和Vue的结合使用 enter...

  • 五、Vue动画 ------ 2020-05-07

    1、常见的能触发动画的操作及添加动画的方式 2、Vue动画的基本使用:通过添加CSS样式使用 3、Vue动画的基本...

  • 12-首页公告

    首页公告注意的主要是如何在vue中使用动画,以及如何在样式中插入字体图标元素,作为修饰符 使用velocity设置...

  • 动画类文章

    css3常用动画+动画库 vue2使用animate css

  • 12.vue动画

    1.不使用动画的情况: 2.使用vue动画 使用过渡类名实现动画 自定义v-前缀: 使用第三方类实现动画: 3.例...

  • Vue过渡和动画概述

    如果没有接触过,你一定会想Vue中如何使用过渡和动画? 简单概述,Vue内置了 和 两个组件,用于更方便的处理过渡...

  • vue离开动画失效原因

    使用vue过渡和动画,进入动画可以,离开动画失效,通过以下办法解决 css 样式设置动画 html结构 这样设置以...

网友评论

      本文标题:vue如何使用连续动画

      本文链接:https://www.haomeiwen.com/subject/melxyftx.html