vue 使用gsap(TweenMax)

第一步 npm install gsap

之后页面中引用

import {TweenMax, gsap,TweenLite} from 'gsap'

可以watch监听属性：(这是图片旋转)

 // TweenMax.to(this.$data, { duration: 0.5, tweenedNumber: newValue });// TweenLite.to("#m_left", 1, {width: 100});// TweenLite.to("#m_i", 1, {width: 100});// this.$refs.m_leftTweenMax.from('#m_i', 1, {scale: 1,});console.log(1111,newValue);if(newValue == 24){TweenMax.to('#m_i', 1, {rotation: 0,});}else{TweenMax.to('#m_i', 1, {rotation: 90,});}TweenMax.from('h1', 3, {scale: 0,rotation: -360,y: 300,letterSpacing: '200px'
});
TweenMax.to('h1', 2, {opacity: 0,delay: 3
});

vue 使用gsap(TweenMax)相关推荐

Vue中gsap库实现数字递增动画
效果图如下代码如下: <template><div class="app"><input type="number" step= ...
前端自学Vue笔记干货（第一版，持续更新中~~~）
学习笔记 Vue笔记 nprogress使用 npm i nprogress -S 基本上都是在对axios进行二次封装.前置守卫路由或者封装成工具函数的.js文件中用到 import nprogre ...
面向初学者的GreenSock（第2部分）：GSAP的时间表
GreenSock初学者第二部分的目的是向您介绍GreenSock的TimelineMax . 您将学习: 为什么需要时间表如何在时间轴中包括多个补间如何将多个时间轴打包为函数并将其嵌套在主时间轴 ...
svg动画 html,30个超棒的 SVG 动画展示【上篇】
Made only with CSS, a border forms smoothly around the text, when you hover over the "HOVER&quo ...
svg 动画_30个很棒的SVG动画
作者:MrWang 转发链接:https://segmentfault.com/a/1190000023090287 前言设计人员使用CSS在HTML元素中创建动画.然而,由于HTML元素在创建模式 ...
GreenSock面向初学者：Web动画教程（第1部分）
我在本文中的目的是向您全面介绍GreenSock ,也称为GSAP(GreenSock动画平台),这是一种用于现代Web的高性能,专业级HTML5动画引擎. 这是" 超越CSS:动态DOM动 ...
前端项目总结干货 + 渡一、coderwhy、黑马、尚硅谷实操笔记（第二版，持续更新中~~~）
前端学习笔记(温馨提示:最好根据目录查看笔记) 构建vite.vue项目 1.npm create vite@latest my-vue-app 2.vue create vue01 知识储备响应式 ...
Three.js--》实现3d地球模型展示
目录项目搭建实现网页简单布局初始化three.js基础代码创建环境背景加载地球模型实现光柱效果添加月球模型今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与 ...
基于HTML5的消灭星星网页小游戏设计
目录 1 游戏介绍 1 2.1 Model 3 2.1.1 生成砖墙 4 2.1.2 消除砖块 4 2.1.3 夯实砖墙 6 2.1.4 消除残砖 11 2.2 View 12 2.3 Control ...

vue 使用gsap(TweenMax)

vue 使用gsap(TweenMax)相关推荐

最新文章

热门文章