vue系列-vue动画

最新推荐文章于 2022-10-24 17:15:15 发布

kjl-37

最新推荐文章于 2022-10-24 17:15:15 发布

阅读量78

点赞数

文章标签： javascript 开发语言 es6

本文链接：https://blog.csdn.net/weixin_56275924/article/details/121500053

版权

在vue中，对应的dom元素载入页面或移出页面时，vue提供了多种不同方式的过渡效果。1、单元素/组建的过渡利用vue的 transtion 封装组件，标签渲染(v-if),标签展示(v-show)，示例如下：<script src="../vue.js"></script><body> <div id="root"> <transition> <div v-if="show">.

摘要由CSDN通过智能技术生成

在vue中，对应的dom元素载入页面或移出页面时，vue提供了多种不同方式的过渡效果。

单元素/组建的过渡

利用vue的 transtion 封装组件，标签渲染(v-if),标签展示(v-show)，示例如下：

<script src="../vue.js"></script>
<body>
    <div id="root">
        <transition>
        <div v-if="show">hello vue</div></transition>
        <button @click="btn">点击动画</button>
    </div>
    <script>
        let vm=new Vue({
            el:"#root",
            data:{
                show:false
            },
            methods: {
                btn(){
                    this.show=!this.show
                }
            },
        })
    </script>
</body>

元素的过渡周期(过渡的类名)，在进入离开的过渡中，会有6个class切换：

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

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

3、v-enter-to：<

最低0.47元/天解锁文章

kjl-37

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue系列-vue动画

在vue中，对应的dom元素载入页面或移出页面时，vue提供了多种不同方式的过渡效果。1、单元素/组建的过渡利用vue的 transtion 封装组件，标签渲染(v-if),标签展示(v-show)，示例如下：<script src="../vue.js"></script><body> <div id="root"> <transition> <div v-if="show">.
复制链接

扫一扫