Vue第三天（过渡效果组件）

最新推荐文章于 2024-05-23 19:22:50 发布

小P孩一枚

最新推荐文章于 2024-05-23 19:22:50 发布

阅读量817

点赞数 1

分类专栏： Vue 文章标签： Vue过渡效果 Vue组件

本文链接：https://blog.csdn.net/weixin_43949788/article/details/89376202

版权

Vue第三天过渡效果组件过渡效果概述Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：1.在 CSS 过渡和动画中自动应用 class2.可以配合使用第三方 CSS 动画库，如 Animate.css3.在过渡钩子函数中使用 JavaScript 直接操作 DOM4.可以配合使用第三方 JavaScript 动画库，如 Velocit...

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

Vue第三天

过渡效果

组件

过渡效果

概述

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：

1.在 CSS 过渡和动画中自动应用 class
2.可以配合使用第三方 CSS 动画库，如 Animate.css
3.在过渡钩子函数中使用 JavaScript 直接操作 DOM
4.可以配合使用第三方 JavaScript 动画库，如 Velocity.js

1.使用过度类名实现动画

写个简单例子说明：

 <!--自定义两组样式，来控制 transition 内部的元素实现动画-->
<style>
    /* v-enter ：  【这是一个时间点】 是进入之前,元素的起始状态，此时还没有开始进入
       v-leave-to：【这是一个时间点】 是动画离开之后，离开的终止状态，此时， 元素动画已经结束
    */
    .v-enter, .v-leave-to {
    
        opacity: 0;
        transform: translateX(80px);
    }
    /*
      v-enter-active: 入场动画的时间段
      v-leave-active：离场动画的时间段
    */
    .v-enter-active, .v-leave-active {
    
        transition: all 2s;
    }
</style>

<div id="app">
    <button @click="flag=!flag">点击</button>
    <!--1. transition 元素，是Vue 官方提供的-->
    <transition>
        <h3 v-if="flag">这是一个h3</h3>
    </transition>
</div>

<script>
    let vm = new Vue({
    
        el: '#app',
        data: {
    
            flag: true
        }
    })
</script>

mark

修改v-前缀(自定义前缀)

<style>
    .my-enter, .my-leave-to {
    
        opacity: 0;
        transform: translateY(-80px);
    }
    .my-enter-active, .my-leave-active {
    
        transition: all 2s;
    }
</style>
<body>
    <button @click="flag1=!flag1">点击</button>
    <!--1. transition 元素，是Vue 官方提供的-->
    <transition name="my">
        <h6 v-if="flag1">这是一个h6</h6>
    </transition>
</body>

2.使用第三方类实现动画

animate.css官网

在线cdn

<link rel="stylesheet" href="../../animate.css">
<div id="app">
    <button @click="flag=!flag">点击</button>
    <!--使用 transition 元素 包裹起来-->
        <transition 
                enter-active-class="bounceIn" 
                leave-active-class="bounceOut"     
                :duration="{enter:200,leave:400}">
         <h3 v-if="flag">这是一个h3</h3>
      </transition>
</div>

直接使用在元素身上

<transition >
    <h3  class="animated infinite bounce delay-2s">这是一个h3</h3>
</transition>

3.JavaScript钩子

html:

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

methods: {
   
  // 进入中
  beforeEnter: function

最低0.47元/天解锁文章

小P孩一枚

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue第三天（过渡效果组件）

Vue第三天过渡效果组件过渡效果概述Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：1.在 CSS 过渡和动画中自动应用 class2.可以配合使用第三方 CSS 动画库，如 Animate.css3.在过渡钩子函数中使用 JavaScript 直接操作 DOM4.可以配合使用第三方 JavaScript 动画库，如 Velocit...
复制链接

扫一扫