Vue过渡与动画

最新推荐文章于 2023-04-29 10:00:00 发布

年年7

最新推荐文章于 2023-04-29 10:00:00 发布

阅读量382

点赞数

分类专栏：学习 VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_53120043/article/details/126976841

版权

学习同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

VUE

6 篇文章 0 订阅

订阅专栏

Vue提供了实现过渡动画的内置组件 transition。基本用法就是给我们需要动画的标签外面嵌套 transition 标签，并且给上属性。实现过渡动画一般格式。

<transition>
  <div></div>  //需要动画的div标签
</transition>

Vue提供了6个CSS类名在enter/leave的过渡中切换：

在这里插入图片描述

隐藏：

v-enter：定义进入过渡的开始状态。

v-enter-active：定义进入过渡生效时的状态，在整个进入过渡的阶段中应用。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to：定义进入过渡的结束状态。

显示：

v-leave：定义离开过渡的开始状态。

v-leave-active：定义离开过渡生效时的状态，在整个离开过渡的阶段中应用。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to：定义离开过渡的结束状态。

使用

<!DOCTYPE html>
<html>
<head>
  <title>transition组件的使用</title>
  <meta charset="utf-8">
  <script type="text/javascript" src="lib/vue.js"></script>
</head>
   <style type="text/css">
 
    /*  显示leave  到  隐藏leave-to */
    .v-leave{
      opacity: 1  /*这个是默认值，可写可不写*/
    }
    .v-leave-active{
      transition: opacity 1.5s
    }
    .v-leave-to{
       opacity: 0
    }
 
    /*隐藏enter  到  显示enter-to*/
    .v-enter{
      opacity: 0
    }
    .v-enter-active{
      transition: opacity 1.5s
    }
    .v-enter-to{
      opacity: 1  /*这个是默认值，可写可不写*/
    }
   </style>
<body>
  <div id="app">
    <button @click="toggle()">点击</button>
    <transition>
      <p v-show="issshow">Vue使用transition组件实现了过渡与动画</p>
    </transition>  
  </div>
</body>
   <script type="text/javascript">
    new Vue({
      el:"#app",
      data:{
        issshow:true
      },
      methods:{
        toggle(){ 
         // 此方法是用来控制组件显示与隐藏
           this.issshow=!this.issshow
        }
      }
    })
   </script>
</html>

我们可以从第15行的代码transition: opacity 1.5s和第26行的代码transition: opacity 1.5s中看出是一样的，所以他们的类名可以写在一起，即

.v-leave-active,.v-enter-active{
    transition: opacity 1.5s
}

动画库animate.css（官网：https://animate.style/）

1、在实现动画中会用到自定义过渡类名，可以通过以下特性来自定义过渡类名：enter-class 、leave-class 、enter-to-class 、leave-to-class 、leave-active-class 、enter-active-class 。它们的优先级高于普通的类名，对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 animate.css 相结合使用非常有用。

2、animate.css动画库使用方法：在想有动画的transition标签上面加上 animate__animated 和其他你想要的的动画效果，比如animate__bounce （跳动的动画），就可以实现一个酷炫的CSS动画效果了。

例如

<transition 
enter-active-class="animate__animated animate__bounce" 
leave-active-class="animate__animated animate__bounce">

年年7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue过渡与动画

vue动画与过渡
复制链接

扫一扫

专栏目录

Vue过渡与动画

使用

动画库animate.css（官网：https://animate.style/）

“相关推荐”对你有帮助么？