vue-实现动画类型

Vue实现动画类型:

vue中实现过渡或是动画一共提供了这样四种形式:

  1. 在 CSS 过渡和动画中自动应用 class — 自己写css3动画
  2. 可以配合使用第三方 CSS 动画库,如 Animate.css – 别人写好了类名,我们用
  3. 在过渡钩子函数中使用 JavaScript 直接操作 DOM – 自己用原生js来写动画
  4. 可以配合使用第三方 JavaScript 动画库,如 Velocity.js – 用别人写好的动画库
  • vue只要一使用transition组件就会自动添加6个类名 和 8 个钩子函数
  • transition组件如果有name选项,就可以将类名 v- 换成 ‘name’- 类名
  • 使用第三方的css过渡库 animate.css

6个类名和8个钩子函数类型

 .fade-enter (fade是name名,可变)
 .fade-enter-active
  enter-to (2.1.8+)
  leave
  leave-active
  leave-to (2.1.8+)
  1. 第一种使用方式 自己写
  <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>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
    <style>
        .fade-enter,
        .fade-leave-to {
            opacity: 0;
        }

        .fade-enter-active,
        .fade-leave-active {
            transition: opacity .5s;
        }
    style>
head>

<body>
    <div id="app">
        <button @click=" show = !show ">转换button>
        <transition name="fade">
            <p v-show="show"> {{ msg }} p>
        transition>
    div>
body>
<script>
    new Vue({
        el: '#app',
        data: {
            show: true,
            msg: 'hello'
        }
    })
script>

html>
  1. 第二种使用方式 使用第三方 CSS 动画库,如 Animate.css

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
    <link rel="stylesheet" href="./animate.css">
head>

<body>
    <div id="app">
        <button @click=" show = !show ">转换button>
        
        
            

原来的内容 p> transition>

转换的内容 p> transition> div> body> <script> new Vue({ el: '#app', data: { show: true, msg: 'hello' } }) script> html>

你可能感兴趣的:(vue-实现动画类型)