zoukankan      html  css  js  c++  java
  • animate动画库的使用

    在vue中便捷使用animate动画库效果。

    安装animate动画库

    npm install animate.css --save

    在vue跟目录中 main.js 导入animate动画库

    import animated from 'animate.css' 
    ​
    Vue.use(animated)

    使用一

    直接在css中引入动画

    缺点: 在页面一加载完毕动画同时也执行完毕,要是在页面可视区域外,动画就不能被用户看到

    <div class="animate__animated  animate__backInLeft" >
       第一个 animate__animated  为固定的类名 必须要加
       第二个 animate__backInLeft  在动画库中 选择的效果 
    </div>

    可在官网选择所需的动画样式名字,官网地址:https://animate.style/

    使用二

    优点:该方法是页面滑动到标签位置,标签显示,立马执行该动画。

    在vue跟目录中 main.js 中自定义指令

    注:该事件是在大佬的博客发现,要是各位发现原址,欢迎评论留言

    // 页面滑动到元素执行改动画
    Vue.directive('class', {
      inserted: function (el, binding) {
        // 聚焦元素
        binding.addClass = () => {
          const { top } = el.getBoundingClientRect()
          const h = document.documentElement.clientHeight || document.body.clientHeight
          // console.log('屏幕', top, '可', h)
          if (top < h) {
            el.className = binding.value
            if (binding.addClass) {
              window.removeEventListener('scroll', binding.addClass)
            }
          }
        }
        window.addEventListener('scroll', binding.addClass)
        binding.addClass()
      },
      unbind: function (el, binding) {
        if (binding.addClass) {
          window.removeEventListener('scroll', binding.addClass)
          console.log('取消事件绑定')
        }
      }
    })

    缺点: 在使用该事件需要嵌套一层div,用来放该动画事件

    <div v-class="'animate__animated animate__fadeInUp'">
      <div>
            动画内容 建议在外面包一层div 防止影响到页面css
      </div>
    </div>

    uni-app(H5)扩展

    保存该css: https://raw.githubusercontent.com/daneden/animate.css/master/animate.css

    保存至static文件下

    在app引入css

    <style>
        /*每个页面公共css */
        @import "static/css/animate.css";
    </style>

    使用方法与vue一样

     

    本文来自博客园,作者:虚乄,转载请注明原文链接:https://www.cnblogs.com/lovejielive/p/15465252.html

  • 相关阅读:
    剑指offer(18)二叉搜索树的后续遍历
    剑指offer(17)层次遍历树
    剑指offer(16)栈的压入、弹出序列
    剑指offer(15)
    剑指offer(14)
    剑指offer(13)
    剑指offer(12)
    剑指offer(11)
    2020 年 11 月编程语言排行榜,Python 势如破竹,超越 Java?
    Python 除了 time.sleep,你还有一个暂停代码的方法
  • 原文地址:https://www.cnblogs.com/lovejielive/p/15465252.html
Copyright © 2011-2022 走看看