乐鱼电竞

    教育行业A股IPO第一股（股票代码 003032）

    全国咨询/投诉热线：400-618-4000

    什么是Vue过渡和动画？

    更新时间:2021年09月09日16时11分 来源:乐鱼电竞 浏览次数:

    Vue在插人、更新或者移除DOM时，提供了多种过渡效果。这里所说的过渡，简而言之，就是从一个状态向另外一个状态插入值，新的状态替换了旧的状态。Vue提供了内置的过渡封装组件，即transition组件，语法格式如下。


    <transition name="fade">
    <!-- 需要添加过度的div标签 -->
    <div></div>
</transition>

    上述代码中，标签中用来放置需要添加过渡的div元素，使用name属性可以设置前缀，将name属性设为fade,那么“fade- ”就是在过渡中切换的类名前缀，如fade-enter、fade-leave等。如果 标签上没有设置name属性名，那么“v-” 就是这些类名的默认前缀，如v-enter、 v-leave 等。推荐设置name值进行命名，这样在应用到另一个过渡时就不会产生冲突。

    通过标签搭配CSS动画(如@keyframes)可以实现动画效果。动画相比过渡来说，可以在一个声明中设置多个状态，例如，可以在动画20%的位置设置一个 关键�。缓笤诙�50%的位置设置一个完全不同的状态。另外， 标签还提供了一些钩子函数，可以结合JavaScript代码来完成动画效果，具体会在后面进行讲解。

    好口碑IT培训



    0 分享到：
    和我们在线交谈！
    【网站地图】【sitemap】