Vue中的过渡和动画

最新推荐文章于 2022-11-19 12:48:57 发布

-Ali

最新推荐文章于 2022-11-19 12:48:57 发布

阅读量389

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_47492981/article/details/106885605

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、vue动画的理解
（1）操作css的transition或animation
（2）vue会给目标元素添加/移除特点的class
（3）过渡的相关类名：
xxx-enter-active：指定显示的transition
xxx-leave-active：指定隐藏的transition
xxx-enter/xxx-leave-to：指定隐藏时的样式

2、基本过渡动画的编码
（1）在目标元素外包裹
（2）定义class样式
指定过渡样式：transition
指定隐藏时的样式：opacity/其他

过渡案例：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*为显示和隐藏过程设置过渡效果*/
        .aa-enter-active, .aa-leave-active { 
            transition: opacity 1s;
        }
        /*隐藏时的样式*/
        .aa-enter, .aa-leave-to { 
            opacity: 0;
        }
  
         /*显示的过渡效果*/
        .move-enter-active { 
            transition: all 1s;
        }
         /*隐藏的过渡效果*/
        .move-leave-active {
            transition: all 3s;
        }
        .move-enter, .move-leave-to { 
            opacity: 0;
            transform: translateX(20px); /*X轴移动效果*/
        }
    </style>
    <script src="vue.js" type="text/javascript"></script><!--引入vue.js-->
</head>
<body>
    <div id="app1">
        <button @click="isShow = !isShow">toggle</button>
        <transition name="aa">
            <p v-show="isShow">hello</p> <!--v-show显示隐藏-->
        </transition>
    </div>

    <div id="app2">
        <button @click="isShow = !isShow">toggle</button>
        <transition name="move">
            <p v-show="isShow">hello</p>
        </transition>
    </div>
    
    <script type="text/javascript">
        var app1 = new Vue({
            el:"#app1",
            data:{
                isShow:true
            }
        })

        var app2 = new Vue({
            el:"#app2",
            data:{
                isShow:true
            }
        })
    </script>    
</body>

动画案例：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .aa-enter-active { 
            animation: go 3s;  /*正向为显示*/
        }
        .aa-leave-active {
            animation: go 3s reverse;  /*反向为隐藏*/
        }
        @keyframes go { 
            0% {
                transform: scale(0);
            }
            50% {
               transform: scale(1.5);
            }
            100% {
               transform: scale(1);
            }
        }
    </style>
    <script src="vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <button @click="isShow = !isShow">Toggle show</button><br>
        <transition name="aa">
            <p v-show="isShow" style="display: inline-block;">hello</p>
        </transition>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                isShow:true
            }
        })
    </script>    
</body>

-Ali

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的过渡和动画

1、vue动画的理解（1）操作css的transition或animation（2）vue会给目标元素添加/移除特点的class（3）过渡的相关类名：xxx-enter-active：指定显示的transitionxxx-leave-active：指定隐藏的transitionxxx-enter/xxx-leave-to：指定隐藏时的样式2、基本过渡动画的编码（1）在目标元素外包裹（2）定义class样式指定过渡样式：transition指定隐藏时的样式：opacity/其他过渡案例
复制链接

扫一扫