当前位置:首页 > 前端 > Vue.js

vue 安装引入TweenMax.js之TweenMax动画库

Vue.js 2019-09-02

项目开发中意外发现同事引入了一个叫的TweenMax动画库,马上试用了一下功能很强大,觉得挺屌的分享出来。
官方网站:TweenMax 中文官网
官方中文API:点击这里

安装

  1. npm install gsap

局部引入

  1. import { TweenLite } from 'gsap/TweenMax'

简单案例

  1. <template>
  2. <div id="test" class="test">蚂蚁打死了大象</div>
  3. <button @click="show()">显示</button>
  4. <button @click="hide()">隐藏</button>
  5. </template>
  6. // 显示
  7. <script>
  8. import { TweenLite } from 'gsap/TweenMax'
  9. export default {
  10. methods: {
  11. // 显示
  12. show () {
  13. TweenLite.to('#test', 0.2, {
  14. opacity: 1,
  15. onComplete () {
  16. }
  17. })
  18. },
  19. // 隐藏
  20. hide () {
  21. TweenLite.to('#test', 0.2, {
  22. opacity: 0,
  23. onComplete () {
  24. }
  25. })
  26. }
  27. }
  28. }
  29. </script>
  30. <style>
  31. .test{
  32. height: 200px; width: 200px; background: red; color: white;
  33. }
  34. </style>
< 上一篇 下一篇 >
湘ICP备15005320号-1 似懂非懂 Powered by doyo. 网站地图
返回顶部