在VUE中使用第三方animate.css

最新推荐文章于 2022-12-28 11:10:24 发布

MyAzhe0ci3

最新推荐文章于 2022-12-28 11:10:24 发布

阅读量379

点赞数 2

分类专栏： Vue.js animate.css

本文链接：https://blog.csdn.net/myazhe0ci3/article/details/118188490

版权

Vue.js 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

animate.css

1 篇文章 0 订阅

订阅专栏

官方链接 https://github.com/daneden/animate.css

导入方式 <link href="css/animate.min.css" rel="stylesheet" />

进入过渡生效时的状态 enter-active-class
离开过渡生效时的状态 leave-active-class

案例一：

使用vue过渡和animate.css完成一个div的从左至右的放大,以及从右到左的缩小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="css/animate.min.css" rel="stylesheet" />
</head>
<style>
  div .animated{
    width: 300px;
    height: 300px;
    background-color: red;
  }
</style>
<body>
<div id="app">
  <button @click="show_component('leftAndRight')">显示和隐藏</button>
  <!--
  zoomInLeft   从左向右出现同时放大
     
       -->
  <transition
          enter-active-class="zoomInLeft"
          leave-active-class="zoomOutLeft"
          mode="out-in"
  >
    <component :is="comp" class="animated"></component>
  </transition>

</div>
<script src="js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:'你好呀',
      //   定义组件名称
      comp:''
    },
    //定义两个组件
    components:{
      'leftAndRight':{
        template:'<h1></h1>'
      },


    },
    methods:{
      //定义展示方法,参数为组件名称
      show_component:function (c_name){

        //如果当前组件的名称不等于传入的组件,则展示选择的组件
        if(this.comp != c_name){
          this.comp=c_name;
        }else{
          this.comp='';
        }
      }
    }
  })
</script>
</body>
</html>

案例二

使用vue的动态组件,以及动画效果完成tab页的切换功能,效果如下:
提示:
需要使用到一个mode属性:
mode属性两个值:
in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
out-in: 当前元素先进行过渡，完成之后新元素过渡进入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/animate.min.css" rel="stylesheet" />
</head>
<style>
    div .animated{
        width: 300px;
        height: 300px;
        border: 1px solid red;
    }
</style>
<body>
<div id="app">
     <button @click="show_component('first')">第一个组件</button>
     <button @click="show_component('second')">第一个组件</button>
<!--
zoomInDown   从上向下出现同时放大
   从下向上消失同时缩小
     -->
     <transition
             enter-active-class="fadeInLeft"
             leave-active-class="zoomOutUp"
             mode="out-in"
     >
          <component :is="comp" class="animated"></component>
     </transition>

</div>
<script src="js/vue.js"></script>
<script>
 const app = new Vue({
  el:"#app",
  data:{
   message:'你好呀',
   //   定义组件名称
   comp:''
  },
     //定义两个组件
     components:{
        'first':{
            template:'<h1>第一</h1>'
        },
         'second':{
             template:'<h1>第二</h1>'
         },

     },
     methods:{
      //定义展示方法,参数为组件名称
        show_component:function (c_name){

             //如果当前组件的名称不等于传入的组件,则展示选择的组件
            if(this.comp != c_name){
                 this.comp=c_name;
            }else{
                this.comp='';
            }
        }
     }
 })
</script>
</body>
</html>

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               从原来的位置向上滑动

MyAzhe0ci3

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在VUE中使用第三方animate.css

官方链接 https://github.com/daneden/animate.css导入方式 <link href="css/animate.min.css" rel="stylesheet" />进入过渡生效时的状态 enter-active-class离开过渡生效时的状态 leave-active-class案例一：使用vue过渡和animate.css完成一个div的从左至右的放大,以及从右到左的缩小<!DOCTYPE html><html lang="e
复制链接

扫一扫