标签：过渡 名称 cli ram orm enter 过程 node rip
1.元素的显示与隐藏，实现过渡动画效果
（1）为目标元素添加一个父元素 transition，并添加name属性
在目标元素中添加v-show=“isShow” isShow为Vue中的data
添加button按钮控制“isShow的值
<div id="demo"> <button @click="isShow = !isShow">点击这里变色</button>
<transition name="isd">
<div v-show="show" id="box">哈哈</div>
</transition>
</div>
(2)在style中添加样式
.xxx-enter-active 显示过程的效果
.xxx-leave-active 隐藏过程的效果
.xxx-enter 显示前的效果
.xxx-enter-to 显示后的效果
.xxx-leave 隐藏前的效果
.xxx-leave-to 隐藏后的效果
xxx 代表transition 标签中的name属性值
.isd-enter-active,.isd-leave-active{ transition: all 5s; } .isd-enter,.isd-leave-to{ opacity: 0; transform: translateX(100px); }
2.自定义动画
（1）dom元素和Vue中与上述显示隐藏一样
<div id="demo"> <button @click="show = !show">点击这里</button> <transition name="box"> <p v-show="show" >哈哈哈哈</p> </transition> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> new Vue({ el: "#demo", data: { show:true }, methods: { } }) </script>
（2）自定义动画使用
定义动画 @keyframes 动画名称{ 0% {} 50%{} 100%{} } 在花括号中 以百分数表示各个阶段的动画
使用动画 .xxx-enter-active,.xxx-leave-active{ animation: 动画名称 时间;} xxx 代表transition 标签中的name属性值
.box-enter-active,.box-leave-active{ animation: scale 10s; } @keyframes scale { 0%{ transform: scale(0); } 50%{ transform: scale(1.5); } 100%{ transform: scale(1); } }
标签：过渡 名称 cli ram orm enter 过程 node rip
原文地址：https://www.cnblogs.com/zhaodz/p/11682166.html
