vue动画片

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

没有动画效果  显示有点生硬
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div ,
            flag:false
        },
        methods:{

        }
    });
</script>
</html>
----------------------添加简单的淡入淡出动画和位移--------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style>
        .v-enter, .v-leave-to {
            opacity: 0;
            transform: translateX(200px);
        }
        .v-enter-active,.v-leave-active{
          transition: all .4s ease-in;
        }
    </style>
</head>
<body>
<div ,
            flag: false
        },
        methods: {}
    });
</script>
</html>
------------------------自定义前缀动画-----定义那么属性即可----------------------
css
.my-enter, .my-leave-to {
    opacity: 0;
    transform: translateY(200px);
}
.my-enter-active,.my-leave-active{
    transition: all .4s ease-in;
}

html
<button @click="flag1=!flag1">点我</button>
<transition name="my">
    <h6 v-if="flag1">{{mes}}</h6>
</transition>

------------------------使用第三方类库实现动画----------------------

animate 可以放h3标签上 也可以
-------
 ----------------------------------------------钩子动画    半场动画-------------------------------------------------------------------
动画的生命周期函数  前四个入场  后四个离场
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: red;
            text-align: center;
            line-height: 100px;
        }
        .btn{
            border: 1px solid #398dee;
            display: inline-block;
            width: 108px;
            height: 34px;
            background-color: #398dee;
            border-radius: 3px;
            font-size: 12px;
            line-height: 34px;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }
        :focus{
            outline: 0;
        }
        .gwc{
            position: fixed;
            left: 240px;
            bottom:70px;
            width: 350px;
            height:150px ;
            background-image: url("gwc.jpg");
        }
    </style>
</head>
<body>
<div ;

                done();/*done其实就是afterEnter 函数是afterEnter的应用*/
            },
            afterEnter(el){
                /*动画完成之后*/
               this.flag=!this.flag
            }
        }
    });
</script>
</html>
---------------------------------最后动画组介绍运行代码看看吧-------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style>
        ul li {
            width: 500px;
            height: 50px;
            text-align: center;
            border: 1px solid #c0c0c0;
            line-height: 50px;
            text-decoration: none;
        }

        ul li:hover {
            background-color: #d0e9c6;
            transition: all .8s ease;
        }

        .input {
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #c0c0c0;
        }

        .btn {
            border: 1px solid #398dee;
            display: inline-block;
            width: 108px;
            height: 34px;
            background-color: #398dee;
            border-radius: 3px;
            font-size: 12px;
            line-height: 34px;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }

        .v-enter, .v-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }

        .v-enter-active, .v-leave-active {
            transition: all .6s ease;
        }

        /*下面的v-move  和 v-leave-active配合使用元素渐渐的票上来*/
        .v-move {
             transition: all 0.6s ease;
         }

        .v-leave-active {
              position: absolute;
          }
    </style>
</head>
<body>
<div 
            },
            remove(i) {
                this.list.splice(i, 1);

            }
        }
    });
</script>
</html>
以上是 vue动画片 的全部内容，
                        来源链接：
                            utcz.com/z/376451.html
回到顶部