vue_22使用vue动画(transition标签, .v-enter类)

最新推荐文章于 2022-12-21 15:42:43 发布

暗影岛-寒冰射手

最新推荐文章于 2022-12-21 15:42:43 发布

阅读量732

点赞数

分类专栏： VUE精选

VUE精选专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1.首先将需要动画效果的元素放在 <transition>标签里面
2.在<style>样式表里面添加 .v-enter .v-leave-to .v-enter-active .v-leave-active

代码示例:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../util/vue-2.4.0.js"></script>
    <script src="../util/vue-resource-1.3.4.js"></script>
    <style>
        /*
        vue分为入场动画,和离场动画
        v-enter 这是入场动画开始之前的状态,即原状态 到 达到动画效果的时间段的起始点
        v-leave-to 是离场动画结束后的状态 即 动画效果还原到初始状态后的结束点
        注意下面的是类名,不要少写了点
        */
        .v-enter,.v-leave-to{
            opacity: 0; //透明度,0代表完全透明,1完全不透明
        }
        .v-enter-active,.v-leave-active{
            transition: all 1s ease;  // all 所有样式, 0.5秒动画的执行时间,ease变速执行
        }
    </style>
</head>
<body>
<div id="test">
     <input type="button"  @click.prevent="tag_class" value="button">
    <!--使用transition元素把需要被动画控制的元素,包裹起来-->
    <transition>
        <h3 v-if="clobj">this is h3</h3>
    </transition>
</div>
<script>
    var vm1 = new Vue({
        el:"#test",
        data:{
            clobj:true
        },
        methods:{
            tag_class:function () {
                this.clobj= !this.clobj
            }
        },
        filters:{},
        directives:{}
    })
</script>
</body>
</html>

https://www.jianshu.com/p/8673a00071fa

暗影岛-寒冰射手

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue_22使用vue动画(transition标签, .v-enter类)

1.首先将需要动画效果的元素放在 <transition>标签里面2.在<style>样式表里面添加 .v-enter .v-leave-to .v-enter-active .v-leave-active代码示例:<!doctype html><html lang="en"><head> <meta cha...
复制链接

扫一扫

专栏目录