Vue第十二天（动画）

最新推荐文章于 2023-08-09 16:07:00 发布

若叶-知秋

最新推荐文章于 2023-08-09 16:07:00 发布

阅读量101

点赞数

文章标签： vue 自学菜鸟

本文链接：https://blog.csdn.net/qq_31051117/article/details/84028092

版权

准备步骤如同第一天

代码：（测试注意事项：js中的代码依次开启测试，不可全部开启，会报错）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
</head>
<!--过渡-->
<!--<style>
    /*可以设置不同的进入和离开动画*/
    /*设置持续时间和动画函数*/
    .fade-enter-active, .fade-leave-active {
        transition: opacity 2s;
    }

    .fade-enter, .fade-leave {
        /*不透明级别*/
        opacity: 0;
    }
</style>-->

<!--CSS过渡-->
<!--<style>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(10px);
        opacity: 0;
    }
</style>-->

<!--CSS动画-->
<style>
    .bounce-enter-active {
        animation: bounce-in .5s;
    }
    .bounce-leave-active {
        animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
    }
</style>
<body>
<!--v-enter：定义进入过渡的开始状态-->
<!--v-enter-active：定义进入过渡生效时的状态-->
<!--v-leave: 定义离开过渡的开始状态-->
<!--v-leave-active：定义离开过渡生效时的状态-->

<!--过渡-->
<div id="app1">
    <button v-on:click="show=!show">测试按钮</button>
    <transition name="fade">
        <p v-show="show" v-bind:style="ceshi">测试一下</p>
    </transition>
</div>
<br>

<!--CSS过渡-->
<div id="app2">
    <button v-on:click="show=!show">测试按钮</button>
    <transition name="side-fade">
        <p v-if="show">测试俩下</p>
    </transition>
</div>
<br>

<!--CSS动画-->
<div id="app3">
    <button v-on:click = "show = !show">测试按钮</button>
    <transition name="bounce">
        <p v-if="show">测试三下</p>
    </transition>
</div>
<br>
</body>
<script>
    /*过渡*/
/*    var vm = new Vue({
        el: '#app1',
        data: {
            show: true,
            ceshi: {
                fontsize: '30px',
                color: 'red'
            }
        }, methods: {}
    })*/

    /*CSS过渡*/
  /*  new Vue({
        el:'#app2',
        data:{
            show:true
        }
    })*/

  /*CSS动画*/
    new Vue({
        el:'#app3',
        data:{
            show:true
        }
    })
</script>
</html>