前端应用_Vue_使用过度类名实现动画

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

上海_彭彭

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

阅读量142

点赞数 1

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

本文链接：https://blog.csdn.net/qq_34979346/article/details/99211826

版权

Vue.js 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

为什么要使用动画，目的就一个提高用户体验，

我们一般用在位移和淡进淡出的情况。

下边我们举个例子，用v-if 控制元素的显示和不显示，显示和不显示之间用动画效果，

思路如下：

创建一个h3标签，并插值，
设置v-if=“flag” , 并创建vue 对象，在data里添加flag 为false
创建一个button ，然后绑定一个click 时间， @click=”flag=!flag“
上边的效果为，点击一次显示 h3 ，再点击一次就消失
使用transition 标签把需要动画的部分包裹起来，也就是h3 要包裹起来。
建立一些style 样式，控制动画的行为,参考下部分的内容

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

在这里插入图片描述
完整的代码如下：
非常的炫酷

<!DOCTYPE html>
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" >
            
<link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>动画效果</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
       
        <style>
                .v-enter,.v-leave-to{
                    opacity: 0;
                    transform: translateY(100px);
                    background-color: green;
                    color: red;
                    
                }
                .v-enter-to,.v-leave{
                    opacity: 1;
                    color: red;
                    background-color: green;
                  
                
                }
              
                .v-enter-active,.v-leave-active{
                    
                    transition: all 4s ease;

                }
            
        </style>
            
        
            
    </head>
    <body>
        
        <div id="p">
        <input type="button" @click="flag=!flag" value="button">
        <transition>
        
            <h3 v-if="flag">动画类效果演示</h3>
        </transition>
    </div>

    <script>
            var vue= new Vue(
                {
                
                el: '#p',
                data:{
                    flag:false
                },
                methods:{
                    dh(){
                        
                    }
                    
            }
        
            }
            )
            
            </script>
    </body>

    
</html>

上海_彭彭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端应用_Vue_使用过度类名实现动画

为什么要使用动画，目的就一个提高用户体验，我们一般用在位移和淡进淡出的情况。下边我们举个例子，用v-if 控制元素的显示和不显示，显示和不显示之间用动画效果，思路如下：创建一个h3标签，并插值，设置v-if=“flag” , 并创建vue 对象，在data里添加flag 为false创建一个button ，然后绑定一个click 时间， @click=”flag=...
复制链接

扫一扫