如何解决在状态改变时,做动画
目前我在 Vue.js 中工作,并且有一个导航菜单,我想为其设置动画。我想要做的是当用户将鼠标悬停在一个导航按钮上时显示两个 li
元素。
目前我正在做的是在默认情况下将 showActivities
的数据类型设置为 false,并在 mouseenter
和 false 上将其设置为 true {1}}。所以这有项目在悬停时出现和消失,但它们没有动画。这个动画怎么做?
mouseleave
解决方法
好吧,如果我说对了,你想要一种动画,比如缓慢的淡入淡出。 在 vuejs 转换中,状态附加到 CSS 类上,您可以随意调用和修改这些类。文档更清楚 Vuejs Transitions
例如,如果您在 css 部分添加它,过渡将是缓慢的淡入淡出:
.fade-enter-active,.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。