VUE学习：vue基础20————动画02：动画

最新推荐文章于 2024-06-28 11:31:39 发布

北凉冬

最新推荐文章于 2024-06-28 11:31:39 发布

阅读量126

点赞数

分类专栏：新星计划 vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/GAlbinus/article/details/117412532

版权

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

28 篇文章 0 订阅

订阅专栏

新星计划

15 篇文章 0 订阅

订阅专栏

提示：
VUE学习：vue基础20————动画01：过渡

VUE学习：vue基础20————动画02：动画

前言
动画
- 动画

前言

本文学习Vue的动画相关内容。

提示：以下是本篇文章正文内容，下面案例可供参考

动画

使用动画完成过渡效果

<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
      /*创建动画*/
      @keyframes myScale {
         from {transform: scale(0)}
         50% {transform: scale(2)}
         to {transform: scale(1)}
      }
      @keyframes myMove {
         0% {
            transform: translateX(0);
         }
         50% {
            transform: translateX(100px);
         }
         100% {
            transform: translateX(200px) translateY(100px);
         }
      }
      .scale-enter-active{
         animation: myScale 2s;
      }
      .scale-leave-active{
         animation: myScale 2s reverse;
      }
      .move-enter-active{
         animation: myMove 2s;
      }
      .move-leave-active{
         animation: myMove 2s reverse;
      }
   </style>
   <script src="vue.js"></script>
</head>
<body>
<div id="app">
   <button type="button" @click="change=!change">变变变</button>
   <transition name="scale">
      <h3 v-show="change">放大还是缩小，这是一个问题</h3>
   </transition>
   <transition name="move">
      <h3 v-show="change">移动还是静止，这也是一个问题</h3>
   </transition>
</div>
</body>
<script>
   let vm = new Vue({
      el: "#app",
      data: {
         change:true
      },
      methods: {}
   });
</script>

在这里插入图片描述

第三方动画库的使用

animate.css 动画库中文网地址：http://www.animate.net.cn/

使用第三方库：

<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="vue.js"></script>
   <link rel="stylesheet" href="animate.css">
</head>
<body>
<div id="app">
   <button type="button" @click="show=!show">toggle</button>
   <transition v-on:enter="enter" enter-active-class="animated bounceInRight" leave-active-class="animated bounceOutLeft">
      <h3 v-if="show">跳跃效果</h3>
   </transition>
   <transition enter-active-class="animated rotateIn" leave-active-class="animated rotateOut">
      <h3 v-if="show">翻转效果</h3>
   </transition>
</div>
</body>
<script>

   let vm = new Vue({
      el: "#app",
      data: {
         show:true
      },
      methods: {
         enter(el,done){
            console.log(el);
            console.log(done);
            done();
         }
      }
   });
</script>

在这里插入图片描述

transition组件上可以更改过渡类名，可以更改的类名如下

enter-class
enter-active-class
enter-to-class
eave-class
leave-active-class
leave-to-class

钩子函数

transition组件上可以监听的动画钩子函数如下：

before-enter
enter
after-enter
enter-cancelled
before-leave
leave
after-leave
leave-cancelled

上述钩子函数都会携带两个参数，分别是el表示当前被操作的DOM对象和动画执行的回调函数。
enter和leave事件中回调函数必须调用，否则效果会立即完成。

北凉冬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习：vue基础20————动画02：动画

提示：VUE学习：vue基础19————动画01：过渡VUE学习：vue基础19————动画02：动画前言动画动画使用动画完成过渡效果第三方动画库的使用使用第三方库：钩子函数前言本文学习Vue的动画相关内容。提示：以下是本篇文章正文内容，下面案例可供参考动画动画使用动画完成过渡效果<head> <meta charset="UTF-8"> <title>Title</title> <style>
复制链接

扫一扫

专栏目录