Vue中的动画(二)

时间:2020-7-27 作者:admin


transition-group实现列表动画

  1. 在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用transition 需要使用transition-group 。
  2. 如果要为 v-for 循环创建的元素设置动画,必须为每个元素设置:key属性,否则会报错。
    Vue中的动画(二)
  3. < transition-group >的 appear 属性能实现页面刚打开时,元素上移到指定位置的效果(初始渲染的过渡)。
  4. < transition-group >不同于 < transition >,它会以一个真实元素呈现:默认为一个 < span >。可通过tag属性将transition-group 渲染为指定的元素。
  5. < transition-group > 可通过在css样式中设置 v-move 来改变定位,它会在元素的改变定位的过程中应用。像之前的类名一样,可以通过给< transition-group > 设置 name 属性来自定义前缀,也可以通过 move-class 属性手动设置。
<!DOCTYPE html>
<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>列表动画</title>
    <script src="../lib/vue.js"></script>
    <style>
        li {
            margin: .5rem;
            border: 1px dashed black;
            line-height: 30px;
            padding: 0 5px;
            width: 100%;
        }
        
        li:hover {
            background-color: aquamarine;
            transition: all 1s ease;
        }
        
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }
        
        .v-enter-active,
        .v-leave-active {
            transition: all 1s ease;
        }
        /*v-move和v-leave-active配合使用,实现删除时后徐元素渐渐上来的效果*/
        
        .v-move {
            transition: all .6s ease;
        }
        
        .v-leave-active {
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="app">
        Id
        <input type="text" v-model="id"> Name:
        <input type="text" v-model="name">
        <input type="button" value="添加" @click="add">
        <!-- <ul> -->
        <!--在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,
            不能使用transition 需要使用transition-group 
            如果要为 v-for 循环创建的元素设置动画,必须为每个元素设置:key属性-->
        <transition-group appear tag="ul">
            <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                {{item.id}}---{{item.name}}
            </li>
        </transition-group>
        <!-- </ul> -->
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                id: "",
                name: "",
                list: [{
                    id: 1,
                    name: '富强'
                }, {
                    id: 2,
                    name: '民主'
                }, {
                    id: 3,
                    name: '文明'
                }, {
                    id: 4,
                    name: '和谐'
                }]
            },
            methods: {
                add() {
                    this.list.push({
                        id: this.id,
                        name: this.name
                    })
                },
                del(i) {
                    this.list.splice(i, 1);
                }
            }
        })
    </script>
</body>

</html>

使用钩子函数实现半场动画

可在属性中声明JavaScript钩子,上部分为入场时的钩子函数,下部分为出场时的钩子函数

<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 (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

注: 当只用 JavaScript 过渡的时候,在 enter 和 leave 中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”,Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

实现简单添加到购物车的效果:

<!DOCTYPE html>
<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>Document</title>
    <script src="../lib/vue.js"></script>
    <style>
        .ball {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: brown;
        }
    </style>
</head>

<body>
    <div id="app">
        <!--使用钩子函数实现半场动画-->
        <input type="button" value="快到碗里来" @click="flag=!flag">
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false,
                // flag2: false,
                // flag3: false
            },
            methods: {
                //注意:动画钩子函数的第一个参数el表示要执行动画的那个DOM元素
                beforeEnter(el) {
                    //设置小球开始动画之前的起始位置
                    el.style.transform = "translate(0, 0)"
                },
                enter(el, done) {
                    //这一句不加无法看见动画过程
                    el.offsetWidth

                    //enter 表示动画开始之后的样式,这里可以设置小球完成动画之后的结束状态
                    el.style.transform = "translate(150px, 450px)"
                    el.style.transition = "all 1s ease";

                    //这里的done起始就是afterEnter这个函数,即done是afterEnter函数的引用
                    //done()
                },
                afterEnter(el) {
                    //动画结束后调用
                    //console.log('ok')
                    this.flag = !this.flag
                }
            }
        })
    </script>
</body>

</html>
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。