过渡与动画

最新推荐文章于 2024-04-25 16:16:15 发布

weixin_30922589

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量201

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5d1c02185188255543342861

版权

过渡示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        .show-enter-active, .show-leave-active{
            transition: all .6s linear
        }

        .show-enter, .show-leave-to{
            opacity: 0
        }
    </style>
</head>
<body>

<div id = "app">
    <button @click="show = !show">按钮</button>
    <transition name="show">
        <p v-show="show">test</p>
    </transition>

</div>

<script>
    new Vue({
        el:"#app",
        data:{
            show:true
        }
    })
</script>
</body>
</html>
复制代码

动画示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        .show-enter-active{
            animation: bounse-in 0.5s
        }
        .show-leave-active{
            animation: bounse-in 0.5s reverse
        }
        @keyframes bounse-in {
            0%{
                transform: scale(0);
            }

            50%{
                transform: scale(1.5);
            }

            100%{
                transform: scale(1);
            }
        }

    </style>
</head>
<body>

<div id = "app">
    <button @click="show = !show">按钮</button>
    <transition name="show">
        <p v-show="show" style="text-align: center">testtesttesttesttesttesttesttesttesttest</p>
    </transition>

</div>

<script>
    new Vue({
        el:"#app",
        data:{
            show:true
        }
    })
</script>
</body>
</html>
复制代码

用三方的动画

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
</head>
<body>
<div id = "databinding">
<button v-on:click = "show = !show">点我</button>
<transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
>
    <p v-if="show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>
</div>
<script type = "text/javascript">
new Vue({
    el: '#databinding',
    data: {
        show: true
    }
})
</script>
</body>
</html>
复制代码

转载于:https://juejin.im/post/5d1c02185188255543342861

weixin_30922589

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
过渡与动画

过渡示例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>test</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"><...
复制链接

扫一扫