使用过渡类名实现动画

最新推荐文章于 2022-12-17 22:23:35 发布

原创最新推荐文章于 2022-12-17 22:23:35 发布 · 571 阅读

0 ·

CC 4.0 BY-SA版权

Vue.js 专栏收录该内容

11 篇文章

订阅专栏

（1）使用过渡名实现动画（手写及自定义）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,
        .v-leave-avtive{
            transition: all 0.8s ease;
        }
        .my-enter,
        .my-leave-to{
            opacity: 0;
            transform: translateY(150px);
        }
        .my-enter-active,
        .my-leave-avtive{
            transition: all 0.8s ease;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="切换1" @click="flag=!flag">
    <transition>
        <h3 v-if="flag">这是一个标签</h3>
    </transition>
    <hr>
    <input type="button" value="切换2" @click="flag2 =! flag2">
    <transition name="my">
        <h3 v-if="flag2">这是一个标签</h3>
    </transition>
</div>
    <script src="../vue-dev/vue-dev/dist/vue.min.js"></script>
    
    <script>
        var vm = new Vue({
            el:"#app",
            data: {
            flag:false,
                flag2:false
            },
            methods:{

            }
        })
    </script>
</body>
</html>

（2）使用第三方animate.css库实现动画（入场离场）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="animate.min.css">
    <style>

    </style>
</head>
<body>
<div id="app">
    <input type="button" value="切换1" @click="flag=!flag">
    <transition enter-active-class=" bounceIn"
                leave-active-class=" bounceOut"
                :duration="{enter:800,leave:200}">
        <h3 v-if="flag" class="animated">这是一个标签</h3>
    </transition>

</div>
    <script src="../vue-dev/vue-dev/dist/vue.min.js"></script>
    
    <script>
        var vm = new Vue({
            el:"#app",
            data: {
            flag:false,

},
methods:{

            }
        })
    </script>
</body>
</html>

（3）钩子函数实现半场动画[加入购物车的效果]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="animate.min.css">
    <style>
        #ball {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="加入购物车" @click="flag = !flag">
    <transition @before-enter="beforeEnter"
                @enter="enter"
                @after-enter="afterEnter"                   >
        <div id="ball" v-if="flag"></div>
    </transition>

</div>
    <script src="../vue-dev/vue-dev/dist/vue.min.js"></script>
    <!--<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>-->
    <script>
        var vm = new Vue({
            el:"#app",
            data: {
            flag:false,
            },
            methods:{
                beforeEnter(el){
                    el.style.transform = "translate(0,0)"  // 设置小球开始动画之前的起始位置
                },
                enter(el,done){
                    el.offsetWidth;  // 这句话没有实际的作用，但是如果不写，没有动画效果；可以认为这句话是强制动画刷新
                    el.style.transform = "translate(150px,450px)"; // 移动到规定位置
                    el.style.transition = "all 1s ease"; // 过渡效果
                    done() // 不写的话会出现一些延迟类的问题；done是afterenter函数的引用
                },
                afterEnter(el){
                    // 动画完成之后会调用这个函数
                    this.flag = ! this.flag
                }
            }
        })
    </script>
</body>
</html>