记一次vue 组件中使用 transition 和 transition-group 设置过渡动画,总结来说可分为分为 name 版, js 钩子操作类名版, js 钩子操作行内样式版...
// 单个元素
<transition name="自定义名字">
<p v-if="show">hello</p>
</transition>
// 列表元素: 注意group的直接子元素是v-for渲染出来的
<ul class="list">
<transition-group name="list">
<li v-for="(item, index) in gameList" :key="item.id">
<app-horizontal :itemData="item"></app-horizontal>
</li>
</transition-group>
</ul>
出现的过程: name-enter(初始态) => name-enter-active(中间态) => name-enter-to(终止态)
消失的过程: name-leave => name-leave-active => name-leave-to
以进场过渡动画为例子
我们可以分别设置 enter 阶段 和 enter-to 阶段的动画
1.设置进入时需要过渡的属性
.name-enter
{
opacity: 0;
transform: translateY(30px)
}
2.然后在 name-enter-active中设置过渡时间
.name-enter-active {
transition: all .3s;
}
3.最后在 name-enter-to 中写上终止态属性
其实终止态的opacity: 1;transform: none; 是默认的,可以不用写
.name-enter-to {
opacity: 1;
transform: translateY(0);
}
如果要给列表中的元素设置交错的效果, 元素不多的话可以添加 delay 属性
.name-enter-active:nth-child(3n+1) {
transition-delay: 0s;
}
.name-enter-active:nth-child(3n+2) {
transition-delay: .1s;
}
.name-enter-active:nth-child(3n+3) {
transition-delay: .2s;
}
离场动画同理...
// 例如实现上述列表依次显示
<ul class="list">
<transition-group
v-bind:css="false"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter">
<li v-for="(item, index) in gameList"
:key="item.id"
:data-delay="index*100"
>
<app-horizontal :itemData="item"></app-horizontal>
</li>
</transition-group>
</ul>
//
methods: {
// 事先定义上述类名
// 在beforeEnter enter afterEnter 钩子中手动操作上述类名
// 初始态
beforeEnter(dom) {
dom.classList.add('list-enter', 'list-enter-active');
},
// 中间态
enter(dom,done) {
// 通过 setTimeout + dataset 实现过渡
let delay = dom.dataset.delay;
setTimeout(function () {
dom.classList.remove('list-enter');
dom.classList.add('list-enter-to');
//监听 transitionend 事件
var transitionend = window.ontransitionend ? "transitionend" : "webkitTransitionEnd";
dom.addEventListener(transitionend, function onEnd() {
// 移除事件
dom.removeEventListener(transitionend, onEnd);
//调用done(),表示动画已完成
done()
});
}, delay)
},
// 终止态
afterEnter(dom) {
dom.classList.remove('list-enter-to', 'list-enter-active');
}
}
<ul class="list">
<transition-group
v-bind:css="false"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter">
<li v-for="(item, index) in gameList"
:key="item.id"
:data-delay="index*100"
data-y = "100%"
>
<app-horizontal :itemData="item"></app-horizontal>
</li>
</transition-group>
</ul>
// 对应的操作方法; 添加自定义的 dataset,给dom设置css样式;根据需求添加
methods: {
// 初始态
beforeEnter(dom) {
let { x = 0, y = 0, opacity = 0 } = dom.dataset;
dom.style.cssText = `transition: .3s;opacity: ${opacity};transform: translateX(${x}) translateY(${y});`;
},
// 中间态
enter(dom,done) {
let delay = dom.dataset.delay;
setTimeout(function () {
dom.style.cssText = `transition: .3s;opacity: 1;transform: translateX(0) translateY(0);`;
//监听 transitionend 事件
var transitionend = window.ontransitionend ? "transitionend" : "webkitTransitionEnd";
dom.addEventListener(transitionend, function onEnd() {
dom.removeEventListener(transitionend, onEnd);
done();
});
}, delay)
},
// 终止态
afterEnter(dom) {
dom.style.cssText = "";
}
}
这里记录一下监听css3的animation动画和transition事件:
webkit-animation动画有三个事件:
开始事件: webkitAnimationStart
结束事件: webkitAnimationEnd
重复运动事件: webkitAnimationIteration
css3的过渡属性transition: 一个事件
过渡结束: webkitTransitionEnd
CSS3非常强大,我们可以利用CSS3相关特性绘制很多平面图形,并且可以制作很多简单的动画。今天要分享的是一款用纯CSS3实现的可爱表情动画
Vue.js中的元素动画或页面跳转动画有多种实现方式比如:1、自己手动写CSS3动画来实现2、使用第三方CSS动画库如:Animate.css3、在构子函数中操作DOM4、使用第三方Js动画库如:Velocity.js。
尽量多的列举出新手引导动画的实现方式, 昨天稍微总结了一下, 实现了4种.源码在最后,如果想直接看结果的,可以拉到最后去看.这里假设所有的弹出层都是基于页面上原有的元素
在项目中我们可能对动画进行锁帧,帧率可能是 60 或者 30,如果我们想保证渲染不抖动,在匀速直线运动中,我们尽量保证我们设置的速度要是帧率的倍数,或者保证平均每帧移动的像素点是一样的
常用的CSS动画效果,在实际开发中经常需要用到移动、大小、闪烁、渐显、渐隐等动画效果,这篇文章就整理了些常见的动画效果分享给大家,一遍收藏使用。
创建一个没有背景的圆,然后声明透明度为0.1的黑色边框(看起来是灰色),修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画,并让该动画无限播放(infinite)即可
transition是css最简单的动画。 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!!但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? transition可以做到。
制作动画效果离不开动画运动函数,而我们用得最多的无疑就是Tween.js。根据不同的数学公式原理,Tween.js划分出了不同的动画类型,每种动画类型里面都包含以下的缓动类型:ease in 先慢后快、ease out 先块后慢、ease in out 先慢后快再慢
这是一款超酷CSS3 loading预加载动画特效。该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成。HTML结构:4种loading预加载动画的HTML结构分别如下
js提供的钩子动画before-enter、enter、after-enter,用这种方法写,所有的动画都写在了组件里,外部只需要调用这个fade组件就可以了,也不需要全局去写一些样式了,这种动画的封装是比较推荐的一种动画封装,因为它可以把所有动画的实现完整的封装在一个组件中
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!