vue动画组件库

小阳生煎

已于 2024-01-08 16:44:52 修改

阅读量555

点赞数 10

分类专栏： # Vue3 后台管理 # Vue2 文章标签： vue.js

于 2024-01-08 10:04:58 首次发布

本文链接：https://blog.csdn.net/m0_53912016/article/details/135450359

版权

Vue2 同时被 3 个专栏收录

109 篇文章 4 订阅

订阅专栏

34 篇文章 0 订阅

订阅专栏

后台管理

5 篇文章 0 订阅

订阅专栏

transform

平移

transform : translate(200px);平移，默认是X轴移动，可以单位是%，这个%是自己的，不是父元素的
transform : translatex(200px);根据X轴给定的参数,从当前元素位置移动。
transform : translateY(200px);根据Y轴给定的参数,从当前元素位置移动。
transform : translatez(200px);定义3D转换,只是用Z轴的值。
transform : translate(10px,20px);定义2D平移移动。
transform : translate3d(10px,20px,30px);定义3D平移移动。

简写： transform : translatex(200px)translateY(200px)translatez(200px); transform : rotate(30deg);旋转单位deg 默认是Z轴旋转

旋转

transform : rotatex(30deg);根据X轴给定的参数,从当前元素位置旋转。
transform : rotateY(30deg);根据Y轴给定的参数,从当前元素位置旋转。
transform : rotatez(30deg);定义3D转换,只是用Z轴的值。

简写：transform : rotateX(30deg) rotateY(30deg)rotatez(30deg);

旋转

transform : scale(2);缩放默认是X和Y同时缩放默认值是1
transform : scaleX(2);通过设置×轴的值来定义缩放转换
transform : scaleY(3);通过设置丫轴的值来定义缩放转换。
transform : scaleZ(2);通过设置Z轴的值来定义3D缩放转换。
transform : scale(2,5);定义2D缩放
transform : scale3d(2,3,4);定义3D缩放。

简写：transform : scaleX(2) scaleY(3) scaleZ(3);该元素增加或减少的大小，取决于宽度(X轴)和高度(Y轴)的参数，可以取负值。只不过取负值时，会先让元素进行翻转（顺时针180deg),然后在进行缩放
倾斜

Animation

在了解Animation之前
我们必须了解另一个特殊的东西，Keyframes。

// name是动画的名称
@keyframes name{
     0% {
       -moz-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     25% {
       -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     50% {
       -moz-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     75% {
       -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     100% {
       -moz-transform:rotateY(0eg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
  }

Animation的几个常用属性

animation-name:'name';/*动画属性名，也就是我们前面keyframes定义的动画名*/
animation-duration: 2s;/*动画持续时间*/
animation-timing-function: linear;
/*
动画频率，有匀速，先快后慢    linear：动画以匀速运动
ease：默认值，开始慢，中间快，结束慢，不对称
ease-in：开始慢，后面快
ease-out：开始快，后面慢
ease-in-out：开始慢，中间快，结束慢，对称（注意与ease的区别）
cubic-bezier(n,n,n,n)：可以使用cubic-bezier自定义速度，n的取值从0到1
*/
animation-delay: 2s;/*动画延迟时间*/
animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/
animation-direction: alternate;/*定义动画方式， normal 动画仅正向播放。 alternate 动画正向播放奇数次迭代，并反向播放偶数次迭代。在反向播放周期中，与 animation-timing-function 关联的值也会反转。*/

wow.js

wow是基于Animate.css开发 
适用于鼠标滑动页面展示对应的效果 只执行一次
https://wowjs.uk/ //wow官网

npm install wow.js --save


```csharp
<template>
  <div>
    <h1 class="wow bounceInDown"> Lorem ipsum dolor sit.</h1>
    <div style="height:800px; border: 1px solid red;">1212</div>
  </div>
</template>
<script lang='ts'>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'//引入路由
import WOW from "wow.js";
export default {
  name: '',
  setup() {
    let router = useRouter(), route = useRoute();
    const data = reactive({
      wowjsFn() {
        let wow = new WOW({
          boxClass: "wow", // animated element css class (default is wow)
          animateClass: "animated", // animation css class (default is animated)
          offset: 0, // distance to the element when triggering the animation (default is 0)
          mobile: true, // trigger animations on mobile devices (default is true)
          live: true, // act on asynchronously loaded content (default is true)
          callback: function (box) {
            // the callback is fired every time an animation is started
            // the argument that is passed in is the DOM node being animated
          },
          scrollContainer: null, // optional scroll container selector, otherwise use window
        });
        wow.init()
      }
    })
    onBeforeMount(() => {
    })
    onMounted(() => {
      data.wowjsFn();
    })
    const refData = toRefs(data);
    return {
      ...refData,
    }

  }
};
</script>
//注意：wow.js已引入animate.css 因此不用另外安装animate.css只需导入对于的包即可
<style src="wow.js/css/libs/animate.css"></style>
<style scoped></style>

使用

    <h1 class="wow bounceInDown"> Lorem ipsum dolor sit.</h1>

wow.js 常用类名

类名	说明
wow bounceInDown	从上往下
wow bounceInLeft	从左往右
wow bounceInRight	从右往左
wow flipIn	旋动

Animate.css

npm install animate.css --save

在main.js导入

import 'animate.css'

使用

安装 Animate.css 后，
将类animate__animated与任何动画名称一起添加到元素
（不要忘记animate__前缀！）：
// 弹跳效果
<h1 class="animate__animated animate__bounce">
An animated element</h1>

就是这样！你有一个 CSS 动画元素。极好的！

自定义属性


/* 这只会更改此特定动画的持续时间 */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* 这会全局更改所有动画 */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

动画效果

bounce                   弹跳，反弹，弹起
flash                    闪现，一瞬间，反射
pulse                    跳动，脉冲，脉跳
rubberBand               橡皮圈，橡皮带
shake                    摇动，震动
swing                    旋转，悬挂，摇摆
tada                     时间，波幅范围
wobble                   摆动， 摇晃，不稳定
jello                    凝聚
bounceIn                 放大弹跳，
bounceInDown             从上面跳跳来
bounceInLeft             从左边出现
bounceInRight            从右边出现
bounceInUp               从下面上来
bounceOut                从上面下去
bounceOutDown            从原来的位置跳下去
bounceOutLeft            从原来的位置跳到左边去
bounceOutRight           从原来的位置跳到右边去
bounceOutUp              从原来的位置跳到上面去
fadeIn                   整体渐入，淡淡的隐现
fadeInDown               从上向下渐入    
fadeInDownBig            从上向下直接滑动下来
fadeInLeft               从左向右渐入
fadeInLeftBig            从左向右直接滑动
fadeInRight              从右向左渐入
fadeInRightBig           从右向左直接滑动
fadeInUp                 从下向上渐入
fadeInUpBig              从下向上直接滑动
fadeOut                  渐出
fadeOutDown              从上向下渐出
fadeOutDownBig           从上向下直接滑动出去
fadeOutLeft              从左向右渐出
fadeOutLeftBig           从左向右直接滑动出去
fadeOutRight             从右向左渐出
fadeOutRightBig          从右向左直接滑动出去
fadeOutUp                从下向上渐出
fadeOutUpBig             从下向上直接滑动出去
flipInX                  水平翻转呈现
flipInY                  垂直翻转呈现
flipOutX                 水平翻转消失
flipOutY                 垂直翻转消失
lightSpeedIn             轻轻的呈现
lightSpeedOut            轻轻的消失
rotateIn                 旋转呈现
rotateInDownLeft         从左向右转动渐入 从上向下转动            转动:没有旋转到一周 
rotateInDownRight        从右向左转动渐入 从上向下转动            转动:没有旋转到一周  
rotateInUpLeft           从右向左转动渐入 从下向上转动
rotateInUpRight          从左向右转动渐入 从下向上转动            转动:没有旋转到一周          
rotateOut                旋转消失
rotateOutDownLeft        从左向右转动渐出 从上向下转动            转动:没有旋转到一周 
rotateOutDownRight       从右向左转动渐出 从上向下转动            转动:没有旋转到一周 
rotateOutUpLeft          从右向左转动渐出 从下向上转动            转动:没有旋转到一周 
rotateOutUpRight         从左向右转动渐出 从下向上转动            转动:没有旋转到一周 
hinge                    定点转动
rollIn                   旋转渐入                              旋转：转动一周
rollOut                  旋转渐出                              旋转：转动一周
zoomIn                   放大渐入
zoomInDown               从上向下出现同时放大
zoomInLeft               从右向左出现同时放大
zoomInRight              从左向右出现同时放大
zoomInUp                 从下想上出现同时放大
zoomOut                  缩小渐出
zoomOutDown              从上向下消失同时缩小
zoomOutLeft              从右向左消失同时缩小
zoomOutRight             从左向右消失同时缩小
zoomOutUp                从下向上消失同时缩小
slideInDown              从上向下滑动
slideInLeft              从右向左滑动
slideInRight             从左向右滑动
slideInUp                从下向上滑动
slideOutDown             从原来的位置向下滑动
slideOutLeft             从原来的位置从左滑动
slideOutRight            从原来的位置向右滑动
slideOutUp               从原来的位置向上滑动

更详细教程