049——VUE中使用animation与transform实现vue的动画效果

最新推荐文章于 2022-08-09 10:23:28 发布

weixin_33828101

最新推荐文章于 2022-08-09 10:23:28 发布

阅读量332

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yiweiyihang/p/8268917.html

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>使用animation与transform实现vue的动画效果</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="hdcms">
    <button @click="type=!type">显示/隐藏</button>
    <transition name="lt">
        <h1 v-if="type">http://www.baidu.com百度一下就知道</h1>
    </transition>
</div>

<script>
    new Vue({
        el: "#hdcms",
        data: {
            type: false
        }
    });
</script>
<!--
    animation:活泼;
    transition:过渡
    transform：改变
    translate：转化
-->
<style type="text/css">
    .lt-enter-active{
        animation: show-in 1s;
        transition: all 1s;
    }
    .lt-leave-active{
        animation: show-out 1s;
        transition: all 1s;
    }

    .lt-enter,.lt-leave-to{
        opacity: 0;
    }
    @keyframes show-in {
        0%{
            transform: translate(200px,0);
        }
        100%{
            transform: translate(0,0);
        }
    }
    @keyframes show-out {
        0%{
            transform: translate(0,0);
        }
        100%{
            transform: translate(200px,0);
        }
    }
</style>
</body>

</html>

转载于:https://www.cnblogs.com/yiweiyihang/p/8268917.html

weixin_33828101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
049——VUE中使用animation与transform实现vue的动画效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用animation与transform实现vue的动画效果</title> <script src="vue.js"></s...
复制链接

扫一扫