Vue 动画：CSS 动画原理 & animate.css 库的使用 & 同时使用过渡和动画 & Js 动画与 Velocity.js 的结合 & 多个元素或组件的过渡 & 动画封装

最新推荐文章于 2023-02-15 16:39:05 发布

莫亓

最新推荐文章于 2023-02-15 16:39:05 发布

阅读量983

点赞数 1

分类专栏：学习笔记📒 文章标签： vue

本文链接：https://blog.csdn.net/Bule_daze/article/details/106074385

版权

本文详细介绍了Vue中CSS动画的原理，如何使用animate.css库，以及如何同时应用过渡和动画。还讨论了Vue与Velocity.js结合的JS动画，多个元素或组件的过渡动画，以及Vue列表过渡和动画封装的方法。

摘要由CSDN通过智能技术生成

Vue 中 CSS 动画原理

<div id="app">
  <div v-if="show">hello world</div>
  <button @click="handleClick">切换</button>
</div>
<script>
  var vm = new Vue({
    
    el: '#app',
    data: {
    
      show: true
    },
    methods: {
    
      handleClick() {
    
        this.show = !this.show;
      }
    }
  })
</script>

现在希望 hello world 在隐藏和显示的时候加上渐隐渐现的动画效果。

在想要添加动画的标签外部添加 <transiton></transiton> 标签，Vue 会自动帮助我们构建一个动画的流程。

<transiton></transiton> 包裹的内容有一个过渡的动画效果，可以通过 name 属性给该标签起一个名字。

从隐藏状态变成显示状态：

从显示状态变成隐藏状态：

fade-enter 中的前缀 fade 是 transition 中 name 定义的名字。如果 transition 没有定义 name 属性，前缀默认为 v。即：v-enter，v-enter-active，……

<head>
  <style>
    .fade-enter, .fade-leave-to {
    
      opacity: 0;
    }
    .fade-enter-active, .fade-leave-active {
    
      transition: opacity 3s
    }
  </style>
</head>

<body>
  <div id="app">
    <transition name="fade">
      <div v-if="show">hello world</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
  <script>
    var vm = new Vue({
    
      el: '#app',
      data: {
    
        show: true
      },
      methods: {
    
        handleClick() {
    
          this.show = !this.show;
        }
      }
    })
  </script>
</body>

通过在某一时刻自动向 div 元素上增加一些 class 的底层原理，Vue 帮助我们实现了 CSS 过渡动画效果。

在 Vue 中使用 animate.css 库

使用 `@keyframes` 实现动画效果

<head>
  <style>
    @keyframes bounce-in {
    
      0% {
    
        transform: scale(0)
      }
      50% {
    
        transform: scale(1.5)
      }
      100% {
    
        transform: scale(1)
      }
    }

    .fade-enter-active {
    
      transform-origin: left center;
      animation: bounce-in 1s;
    }
    .fade-leave-active {
    
      transform-origin: left center;
      animation: bounce-in 1s reverse;
    }
  </style>
</head>

<body>
  <div id="app">
    <transition name="fade">
      <div v-if="show">hello world</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
  <script>
    var vm = new Vue({
    
      el: '#app',
      data: {
    
        show: true
      },
      methods: {
    
        handleClick() {
    
          this.show = !this.show;