Vue中的动画效果

最新推荐文章于 2024-06-04 02:56:38 发布

Gavincoder

最新推荐文章于 2024-06-04 02:56:38 发布

阅读量878

点赞数

分类专栏： vue 大前端

本文链接：https://blog.csdn.net/weixin_39200308/article/details/100024583

版权

大前端同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

欢迎大家加入我的github项目,一起学习，一起发展

---> 全栈工程师进阶学习站
---> 我的前端学习笔记
--->行业内最新最群的报告，工作日每日更新

—>原生 js 训练计划

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 这两个是过程 */
        .xxx-enter-active,
        .xxx-leave-active {
            transition: opacity 1s;
        }

        /* 这两个是初始时无样式与消失后无样式 */
        .xxx-enter,
        .xxx-leave-to {
            opacity: 0;
        }

        /* 这两个是过程 */
        .yyy-enter-active,
        .yyy-leave-active {
            /* transition 的第一个参数是指发生过渡效果的动画名称 第二个参数是时间 */
            transition: all 1s;
        }

        /* 这两个是初始时无样式与消失后无样式 */
        .yyy-enter,
        .yyy-leave-to {
            opacity: 0;
            /* 变化方向 */
            transform: translateX(20px);
        }
    </style>
</head>

<body>
    <!--
1. vue动画的理解
  操作css的trasition或animation
  vue会给目标元素添加/移除特定的class
2. 基本过渡动画的编码
  1). 在目标元素外包裹<transition name="xxx">
  2). 定义class样式
    1>. 指定过渡样式: transition
    2>. 指定隐藏时的样式: opacity/其它
3. 过渡的类名
  xxx-enter-active: 指定显示的transition
  xxx-leave-active: 指定隐藏的transition
  xxx-enter: 指定隐藏时的样式
-->
    <div id="app">
        <p>动画 1</p>
        <button @click="check">toggle</button>
        <!-- //这边的 name 名称随便写,跟样式保持一致 -->
        <transition name="xxx">
            <p v-show="show">transtion</p>
        </transition>

        <p>动画 2</p>
        <button @click="check2">toggle</button>
        <!-- //这边的 name 名称随便写,跟样式保持一致 -->
        <transition name=yyy>
            <p v-show="show2">transtion</p>
        </transition>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                show: true,
                show2:true
            }
        },
        methods: {
            check: function () {
                this.show = !this.show;
                
            },
            check2:function(){
               this.show2=!this.show2 
            }
        },
    })


</script>

</html>

```闲聊时刻

10年短信公司，互联网100强企业！主营业务：短信（国内和国际）App H5一键免密登录，防薅羊毛接口，图片OCR，空号检测，活跃号检测，人证核验，活体检测，高防ddos攻击等等200多个企业服务接口！需要的联系他13592366783 官方链接：https://zz.253.com/v5.html#/register?uid=1953

自己公司需求偶然间用了一家第三方接口供应商，产品应有尽有，很齐全，对接文档非常详细，彼此都很节约时间，主要非常稳定，包括服务方面很给力，有兴趣的博友，可以联系他，算是对合作伙伴的支持了

Gavincoder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的动画效果

欢迎大家加入我的github项目,一起学习，一起发展--->全栈工程师进阶学习站--->我的前端学习笔记--->行业内最新最群的报告，工作日每日更新 —>原生 js 训练计划<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫

专栏目录