vue4-过渡动画组件

最新推荐文章于 2023-02-16 18:49:28 发布

原创最新推荐文章于 2023-02-16 18:49:28 发布 · 261 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了Vue.js中的过渡和动画，包括CSS过渡、CSS动画、自定义过渡类名以及JavaScript钩子的使用。重点讲解了组件的创建、全局与私有组件的区分、组件切换的多种方式及动画应用，以及组件间的数据传递和事件通信。同时，还提到了如何利用ref获取DOM元素和子组件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue中的过渡和动画

参考 https://cn.vuejs.org/v2/guide/transitions.html#CSS-过渡
其他第三方 CSS 动画库：Animate.css 。。。。

1.css过渡

1.1类名

在这里插入图片描述

1.2样式定义：

在这里插入图片描述

1.3使用方法

在这里插入图片描述

<transition name="ballTrans" >
<!-- v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" -->
<div class="ball" v-if="show" ></div>
</transition>




.ballTrans-enter{
    opacity:0;
    transform: translate(100px,100px);
}
.ballTrans-leave-to{
    opacity:0;
    transform: translate(100px,100px);
}
.ballTrans-enter-active{
    transition: cubic-bezier(1.0, 0.5, 0.8, 1.0) 1s  All;
    -webkit-transition:cubic-bezier(1.0, 0.5, 0.8, 1.0) 1s  All;
    -moz-transition: cubic-bezier(1.0, 0.5, 0.8, 1.0) 1s  All;
}
.ballTrans-leave-active{
    transition: ease 2s  All;
    -webkit-transition:ease 2s  All;
    /* -moz-transition:ease 6s  All; */
}

2.css 动画 @keyframes

.bounce-enter-active {
  animation: 名称  5s;
}
.bounce-leave-active {
  animation:名称  5s reverse;
}
@keyframes 名称   {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

兼容性：

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
}

@-o-keyframes mymove /* Opera */
{
}

3.自定义过渡的类名

我们可以通过以下特性来自定义过渡类名：
enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

<!--  引入animate.css  --!>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<!--  使用方式  --!>
 <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"  >
    <p v-if="show">hello</p>
  </transition>

4.js钩子

4.1事件

在这里插入图片描述
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。见小球购物车的例子

4.2例子，小球购物车

在这里插入图片描述

51行：隐藏小球

<script>
    window.onload = function () {
        let vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {
                // 注意：动画钩子函数的第一个参数：el，表示
                // 要执行动画的那个DOM元素，是个原生的 JS DOM 对象
                // 可以认为，el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
                beforeEnter(el) {
                    // 表示动画入场之前，此时动画还未开始，可以在其中
                    // 设置元素开始动画之前的起始样式
                    // 设置小球开始动画之前的起始位置
                    el.style.transform = 'translate(0,0)';
                },
                enter(el,done) {
                    //没有实际效果，但不可缺少，可以理解为强制动画刷新
                    el.offsetWidth;//offsetHeight、offsetLeft等都可以
                    //表示动画，开始之后的样式，可以设置小球完成动画的结束状态
                    el.style.transform = 'translate(150px,500px)';
                    el.style.transition = 'all 1s ease';

                    // 这里的 done，其实就是 afterEnter 这个函数，
                    // 也就是说：done 是 afterEnter 函数的引用
                    done();
                },
                afterEnter(el) {
                    //表示动画完成之后小球的状态

				    // 使用 flag 标识符，来表示动画的切换；
				    // Vue 把一个完整的动画，使用钩子函数，拆分为了两部分；
				    // 对flag：第一部分 false -> true ;  第二部分 true -> false
				    
				    // 这句话，第一个功能，是控制小球的显示与隐藏
				    // 第二个功能：直接跳过后半场动画，让 flag 标识符直接变为 false
				    // 当第二次再点击按钮的时候，flag = false -> true
                    this.flag = !this.flag;
                }
            }
        });
    }
</script>
--------------------- 
作者：肖ZE 
来源：优快云 
原文：https://blog.youkuaiyun.com/lucky541788/article/details/83051324 
版权声明：本文为博主原创文章，转载请附上博文链接！

在这里插入图片描述