Vue_1-10_过度+动画

最新推荐文章于 2023-12-22 09:03:52 发布

陪你去流浪_

最新推荐文章于 2023-12-22 09:03:52 发布

阅读量90

点赞数

本文链接：https://blog.csdn.net/Jokerxiuka/article/details/118495043

版权

Vue过度+动画

<!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>Document</title>
    <style>
        /* 显示/隐藏的过渡效果 */
        .xxx-enter-active,.xxx-leave-active{
            transition: opacity 1s;
        }
        /* 隐藏时的样式，进入前+离开之后 */
        .xxx-enter,.xxx-leave-to{
            opacity: 0;
        }

        .move-enter-active{
            transition: all 1s;
        }
        .move-leave-active{
            transition: all 3s;
        }
        .move-enter,.move-leave-to{
            opacity: 0;
            transform: translateX(20px);
        }

        .bounce-enter-active {
            animation: bounce-in 1s;
        }
        .bounce-leave-active {
            animation: bounce-in 1s reverse;
            /* 离开 reverse 反过来，开始是1.主键是1.5，最后是0 */
        }
        @keyframes bounce-in {
            0% {
                /* 0s，刚开始看不见 */
                transform: scale(0);
            }
            50% {
                /* 0.5s时，放大到1.5倍 */
                transform: scale(1.5);
            }
            100% {
                /* 1.0s时变成原始大小 */
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="isShow = !isShow">toggle</button>
        <transition name="xxx">            
            <p v-show="isShow">hello</p>
        </transition>
    </div>
    <div id="app2">
        <button @click="isShow = !isShow">toggle</button>
        <transition name="move">            
            <p v-show="isShow">hello</p>
        </transition>
    </div>

    <div id="example-2">
        <button @click="show = !show">Toggle show</button><br>
        <transition name="bounce">
          <p v-if="show" style="display: inline-block;">
              Lorem ipsum dolor sit amet,</p>
        </transition>
      </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data () {
                return {
                    isShow:true
                }
            }
        })
        new Vue({
            el:'#app2',
            data () {
                return {
                    isShow:true
                }
            }
        })
        new Vue({
            el: '#example-2',
            data: {
                show: true
            }
        })
    </script>
</body>
</html>

陪你去流浪_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue_1-10_过度+动画

Vue过度+动画<!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"> <tit
复制链接

扫一扫