23.VUE使用动画完成过渡效果

最新推荐文章于 2023-07-18 10:27:20 发布

休息休息夏

最新推荐文章于 2023-07-18 10:27:20 发布

阅读量250

点赞数 1

分类专栏： VUE基础学习文章标签： vue

本文链接：https://blog.csdn.net/qq_42881159/article/details/117303438

版权

VUE基础学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

文章目录

1.使用动画完成过渡效果
2.使用第三方动画库来实现过渡效果

1.使用动画完成过渡效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*创建*/
        @keyframes myScale {
            from{transform: scale(0)}
            50%{transform: scale(2)}
            to{transform: scale(1)}
        }
        @keyframes myMove{
            0%{
                transform: translateX(0);
            }
            50%{
                transform: translateX(100px);
            }
            100%{
                transform: translateX(200px) translateY(100px);
            }
        }
        .scale-enter-active{
            animation: myScale 2s;
        }
        .scale-leave-active{
            animation: myScale 2s reverse;
        }
        .move-enter-active{
            animation: myMove 2s ;
        }
        .move-enter-active{
            animation: myMove 2s reverse;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <button type="button" @click="change=!change">变变变</button>
    <transition name="scale" >
        <h3 v-show="change">放大还是缩小，这是一个问题</h3>
    </transition>
    <transition name="move">
        <h3 v-show="change">移动还是静止，这是一个问题</h3>
    </transition>
</div>

</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            change:true,
        },
        methods: {},
    });
</script>
</html>

2.使用第三方动画库来实现过渡效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="animate.css">
</head>
<body>
<div id="app">
    <button type="button" @click="show=!show">toggle</button>
    <transition enter-active-class="animated bounceInRight" leave-active-class="animated bounceOutLeft">
        <h3 v-if="show">跳跃效果</h3>
    </transition>
    <transition enter-active-class="animated rotateIn" leave-active-class="animated rotateOut">
        <h3 v-if="show">翻转效果</h3>
    </transition>
</div>
</body>
<script>
    /*
    *transition组件上可以更改过渡类名，可以更改的类名如下
    * enter-class
    * enter-active-class
    * enter-to-class
    * 同理：leave
    *
    * transition组件上可以监听的动画钩子函数如下：
    * */
    let vm = new Vue({
        el: "#app",
        data: {
            show:true
        },
        methods: {},
    });
</script>
</html>

休息休息夏

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
23.VUE使用动画完成过渡效果

文章目录1.使用动画完成过渡效果2.使用第三方动画库来实现过渡效果1.使用动画完成过渡效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*创建*/ @keyframes myScale { from
复制链接

扫一扫

专栏目录