59859cc威尼斯官网-威尼斯欢乐娱人成app

教育行业A股IPO第一股(股票代码 003032)

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

传智教育|传智播客

一样的教育,不一样的品质

全国校区

 

  • JavaEE
  • HTML&JS+前端
  • Python+大数据开发
  • 人工智能开发
  • UI/UE设计
  • App测试
  • 新媒体+短视频
    直播运营
  • 59859cc威尼斯官网-威尼斯欢乐娱人成app

什么是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 分享到:

59859cc威尼斯官网|威尼斯欢乐娱人成app

XML 地图 | Sitemap 地图