Vue-动画，过度类名transition实现自定义文字渐入渐出

最新推荐文章于 2023-05-09 10:04:59 发布

学习没有捷径，如果有那便是持之以恒

最新推荐文章于 2023-05-09 10:04:59 发布

阅读量2.1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/wulianlang6162/article/details/99059872

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--//导入js包-->
    <script src="js/vue.js"></script>
    <!-- Bootstrap -->
    <link href="./bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

    <style>
        /*自定义两组样式。来控制transition内部的元素实例动画*/
        /*v-enter 【时间点进入之前】 元素的起始状态，此时还没有开始进入*/
        /*v-leave-to [这是一个时间点】是动画离开之后，离开的终止状态，此时元素动画已经结束*/
        .v-enter, v-leave-to {
            opacity: 0;
            transform: translateX(800px);

        }

        /*v-enter-active入场时段*/
        /*v-leave-active出场时段*/
        .v-enter-active,
        .v-leave-active {
            transition: all 0.4s ease;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="戳我进入" @click="flag=!flag">
    <transition>
        <!--需求：点击按钮，让p显示，再点击，让p隐藏-->
        <p v-if="flag">{{msg}}</p>
    </transition>
</div>


<script type="text/javascript">

    new Vue({
        el: '#app',
        data: {
            msg: 'hellfo  vue.js.',
            flag: false
        }
    });
</script>
</body>
</html>

学习没有捷径，如果有那便是持之以恒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue-动画，过度类名transition实现自定义文字渐入渐出

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <script src="js/vue.js"></script&g...
复制链接

扫一扫