vue过渡动画效果transition淡入淡出

最新推荐文章于 2024-06-20 11:00:33 发布

爬楼梯的小新

最新推荐文章于 2024-06-20 11:00:33 发布

阅读量3.1k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_57607714/article/details/118992378

版权

vue 专栏收录该内容

62 篇文章 1 订阅

订阅专栏

过渡其实就是一个淡入淡出的效果

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果

Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

语法格式：

<transition name = "nameoftransition">
   <div></div>
</transition>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
<script src="./js/vue.js"></script>
<style>
    .fade-enter-active, .fade-leave-active {
    /* opacity 透明度 */
    transition: opacity 1s
}
    /* .fade-leave-active, 2.1.8 版本以下 */
    .fade-enter, .fade-leave-to  {
        opacity: 0
    }
</style>
</head>
<body>
    <script src="./dist/bundle.js"></script>
   <div id="app">
       <button @click="isShow">点我</button>
    <!--   方法2  直接在按钮里取反 不写方法其他不变 -->
   <!-- <button @click="show=!show">切换</button> -->

       <transition name="fade">
            <h3 v-show="show">动画实例</h3>
       </transition>
   </div>

   <script>
       var app = new Vue ({
           el:"#app",
           data:{
                show:true
           },
           methods:{
               isShow(){
                   this.show = !this.show;
               }
           }
       })
   </script>
</body>
</html>

效果图：https://www.runoob.com/try/try.php?filename=vue2-transition

爬楼梯的小新

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue过渡动画效果transition淡入淡出

过渡其实就是一个淡入淡出的效果Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件对于这些在过渡中切换的类名来说，如果你使用一个没有名字的<transition>，则v-是这些类名的默认前缀。如果你使用了<transition name="my-transition">，那么v-enter会替换为my-transition-enter。语法格式：<t...
复制链接

扫一扫

专栏目录