vue中的动画使用

vue中有一套自己的过渡动画效果，官网查看：https://cn.vuejs.org/v2/guide/transitions.html

1.transition

<transition></transition>标签内包裹的是可以过渡的元素或组件

条件为：1.必须是动态组件，v-show/v-if

　　　　2.transition包裹根组件，

transition中提供6个类名，完成过渡的动画效果

v-enter 进入动画的开始状态
v-enter-active 进入的过程中
v-enter-to 进入动画的结束状态
v-leave 离开动画的开始过程
v-leave-active 离开动画的过程中
v-leave-to 离开之后的状态

上述类名配合css3过渡或动画效果，即可完成。

其中，如果transition标签的name命名了，比如name=‘fade’ ，则上述类名替换为 fade-enter,

        /*入场前状态*/
        .fade-enter, .fade-leave-to{
            opacity: 0;
        }
        /* 过渡*/
        .fade-enter-active, .fade-leave-active{
            transition: opacity 0.5s;
        }
        /*动画*/
        .ant-enter-active {
            animation: bounce-in 0.5s;
        }
        .ant-leave-active {
            animation: bounce-in 0.5s reverse
        }
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="toggle">切换</button>
        <transition name="fade">
            <div v-show="show">Hello world</div>
        </transition>
        <transition name="ant">
            <div v-show="show">css动画</div>
        </transition>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: function (){
                return {
                    show: true
                }
            },
            methods: {
                toggle () {
                    this.show = ! this.show
                }
            }
        })
    </script>
</body>

2.transitionGroup 列表过渡

transitionGroup和transition的差别在于，如果其中有多个组件，就不可使用transition，需要使用transitionGroup

    <style>
        .list-item{
            display: inline-block;
            margin-right: 10px;
        }
        .list-enter-active,.list-leave-active{
            transition: all 1s;
        }
        .list-enter, .list-leave-to{
            opacity: 0;
            transform: translateY(30px)
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="add">Add</button>
        <button @click="remove">Remove</button>
        <transition-group name="list" tag="p">
            <span v-for="item in items" :key="item" class="list-item">
                {{item}}
            </span>
        </transition-group>
    </div>  
    <script>
        var app = new Vue({
            el: "#app",
            data: function (){
                return {
                    items:[1,2,3,4,5,6,7,8,9],
                    nextNum: 10
                }
            },
            methods: {
                randomIndex(){
                    return Math.floor(Math.random()* this.items.length)
                },
                add() {
                    this.items.splice(this.randomIndex(), 0, this.nextNum++)
                },
                remove(){
                    this.items.splice(this.randomIndex(), 1)
                }
            },
        })
    </script>
</body>

3.js钩子函数

可以在transition属性中声明javascript钩子，使用js实现动画

before-enter(el){} 动画开始前，设置初始状态
enter(el，done){} 执行动画
after-enter(el){} 动画结束，清除工作
enter-cancelled(el){} 取消动画
before-leave(el){}
leave(el，done){}
after-leave(el){}
leave-cancelled(el){}

其中，el表示transition下方组件，done是一个结束的回调函数，表示过渡完成。下方案例显示了done的作用。

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

<body>
  <div id="app">
    <button @click="toggle">toggle</button>
    <transition name="fade" 
      @before-enter="beforeEnter"
      @enter="enter"
      @before-leave="beforeLeave"
      @leave="leave">
      <div v-show="show">
        hello world!
      </div>
    </transition>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: function () {
        return {
          show: true
        }
      },
      methods: {
        toggle (){
          this.show =! this.show;
        },
        //进入前,动画初始状态
        beforeEnter(el) {
          el.style.opacity = 0;
        },
        //动画结束状态
        enter(el, done) {
          el.style.opacity = 1;
          // 监听动画结束事件，执行done，如果没有监听结束事件，上述确实会正常显示隐藏，但是div模块始终占据位置
          el.addEventListener('transitionend', done)
        },
        // 离开前状态
        beforeLeave (el) {
          el.style.opacity = 1;
        },
        // 离开后状态
        leave(el,done){
          el.style.opacity = 0;
          el.addEventListener('transitionend', done)
        }
      },
    })

  </script>
</body>

4.引入animate.css动画

最后一种动画比较简单，通过引入animate.css直接实现动画效果，

enter-active-class: 动画进入过程的动画
leave-active-class: 动画离开过程的动画

animate.css官网： http://www.jq22.com/yanshi819

    <!-- 引入CSS动画库 -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="app">
        <button @click="toggle">toggle</button>
        <transition enter-active-class="animated bounceInLeft"
            leave-active-class="animated bounceOutLeft">
            <div v-show="show">hellow world</div>
        </transition>
    </div>
    <script>
        var app = new Vue ({
            el: '#app',
            data() {
                return {
                    show: false
                }
            },
            methods: {
                toggle() {
                    this.show =! this.show
                }
            },
        })
    </script>
</body>

1.transition

2.transitionGroup 列表过渡

3.js钩子函数

4.引入animate.css动画

猜你喜欢