为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第18天 Vue3框架

【九月打卡】第18天 Vue3框架

2022.09.22 21:05 36浏览

课程名称:2022持续升级 Vue3 从入门到实战 掌握完整知识体系

课程章节:第4章 Vue 中的动画

主讲老师:Dell

课程内容:

今天学习的内容包括:

  • transition标签

  • 单元素入场出场动画

  • v-enter-from

  • v-enter-active

  • v-enter-to

  • v-leave-from

  • v-leave-active

  • v-leave-to

  • 编程练习

课程收获:

v-enter-from 表示入场动画开始的时候

v-enter-active 属性表示在整个过程中我去怎么执行这个动画(根据opacity透明度,在3s内规定以慢速结束的过渡效果 )

v-enter-to 表示入场动画结束的时候


反之隐藏出场动画

v-leave-from

v-leave-active

v-leave-to


如果需要重命名,在transition标签上面写name="名字"  使用的时候把.v改成.名字-leave-to

https://img4.sycdn.imooc.com/632c5c130001fb8805730562.jpg


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@next"></script>

  <style>

    @keyframes shake {  /* 定义一个关键帧shake的动画效果 */

      0% {

        transform: translateX(-100px);

      }

      50% {

        transform: translateX(-50px);

      }

      100% {

        transform: translateX(50px);

      }

    }


    .D-enter-active {

      animation: shake 3s;

    }

    .D-leave-active { /* 表示在整个过程中我去怎么执行这个动画(根据opacity透明度,在3s内规定以慢速结束的过渡效果) */

      transition: opacity 3s ease-out;

    }

    .D-leave-to {

      opacity: 0;

    }

  </style>

</head>

<body>

  <div id="root"></div>

</body>

  <script>

    const app = Vue.createApp({

      data() {

        return {  /* show为true则显示,反之false不显示 */

          show: true

        }

      },

      methods: {

        handleClick() {

          this.show = !this.show;

        }

      },

      template: `

      <transition name="D">

        <div v-if="show">Hello</div>

      </transition>

        <button @click="handleClick">按钮</button>

      `

    })


    const vm = app.mount('#root')

  </script>

</html>


https://img2.sycdn.imooc.com/632c5c81000101f201300064.jpghttps://img1.sycdn.imooc.com/632c5c920001d05a01990112.jpg

        今天学习了transition标签,单元素入场/出场动画,重命名v-enter-from属性值,今天也是收获满满的一天,希望能够每天学习一点点,一直坚持下,加油! 

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
9
获赞与收藏
34

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消