前端进阶Vue框架-----过渡效果

小不言啊

已于 2022-02-21 15:39:34 修改

阅读量285

点赞数

文章标签： vue.js 前端 javascript

于 2022-02-21 15:27:29 首次发布

本文链接：https://blog.csdn.net/m0_61656944/article/details/123048288

版权

本文展示了如何使用Vue.js实现元素的进场和出场动画，通过定义`xby-enter-active`和`xby-leave-active`类以及关键帧动画`@keyframes`来控制元素的透明度和位移变化。同时，还演示了如何在Vue中应用`transition`组件进行列表过渡，通过`appear`属性和`mode`参数实现不同的过渡模式。

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

  <script src="/lib/vue.js"></script>

    <style>
        /* 进场动画 */
        .xby-enter-active {
            animation: aaa 1.5s;
        }

        /* 出场动画 */
        .xby-leave-active {
            animation: aaa 1.5s reverse;
        }


        /* 关键帧 */
        @keyframes aaa {
            0%{
                opacity: 0;
                transition: translateX(100px);
            }


            100%{
                opacity: 1;
                transition: translateX(0px);
            }
        }
    </style>
</head>
<body>
    <div id="box">
        <button @click="isshow=!isshow">点击</button>

        <!-- 加入过度动画     appear：刚开始直接有动画   model:otu-in:先出再进，in-out:先进再出-->
        <transition name="xby" appear   mode="out-in">
        <div v-show="isshow">1111111</div>
    </transition>

    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                isshow:false
            }
        })
    </script>
</body>
</html>

列表过渡：transition-group