【发布时间】：2017-07-29 09:30:47
【问题描述】：
const NotificationBar = {
name: 'notification-bar',
template: `
<div
:class="{
'notification-bar': true,
'notification-bar--error': isError,
'notification-bar--warning': isWarning,
'notification-bar--info': isInfo,
'notification-bar--visible': isVisible,
}"
@click="dismiss"
@transitionend="transitionEnd($event)">
{{ message }}
</div>
`,
props: {
message: {
type: String,
required: true,
},
type: {
type: String,
required: true,
validator(value) {
const valid = ['error', 'warning', 'info'];
return valid.includes(value);
},
},
dismissable: {
type: Boolean,
default: false,
},
timeout: {
type: Number,
default: 0,
},
},
data() {
return {
isVisible: false,
};
},
computed: {
isError() {
return this.type === 'error';
},
isWarning() {
return this.type === 'warning';
},
isInfo() {
return this.type === 'info';
},
},
methods: {
clear() {
const event = 'cleared';
let done;
if (this.isVisible) {
this.$once('transitionend', () => {
done = true;
this.$emit(event, done);
});
this.isVisible = false;
} else {
done = false;
this.$emit(event, done);
}
},
dismiss() {
const event = 'dismissed';
let done;
if (this.dismissable) {
done = true;
this.$emit(event, done);
this.clear();
} else {
done = false;
this.$emit(event, done);
}
},
show() {
if (!this.isVisible) {
this.isVisible = true;
this.$emit('show', this.clear);
if (this.timeout) {
setTimeout(() => {
this.$emit('timeout');
this.clear();
}, this.timeout);
}
}
},
transitionEnd(event) {
this.$emit('transitionend', event);
},
},
mounted() {
window.requestAnimationFrame(this.show);
},
};
const NotificationCenter = {
name: 'notification-center',
components: {
NotificationBar,
},
template: `
<div>
<notification-bar
v-for="notification in active"
:message="notification.message"
:type="notification.type"
:dismissable="notification.dismissable"
:timeout="notification.timeout"
@cleared="clear">
</notification-bar>
</div>
`,
props: {
queue: {
type: Array,
required: true,
},
},
data() {
return {
active: [],
};
},
computed: {
hasActiveNotification() {
return this.active.length > 0;
},
hasQueuedNotification() {
return this.queue.length > 0;
},
},
watch: {
queue() {
if (this.hasQueuedNotification && !this.hasActiveNotification) {
this.setNextActive();
}
},
},
methods: {
setNextActive() {
this.setActive(this.queue.shift());
},
setActive(notification) {
this.active.push(notification);
},
removeActive() {
this.active.pop();
},
clear() {
this.active.pop();
if (this.hasQueuedNotification) {
this.$nextTick(this.setNextActive);
}
},
},
};
window.vm = new Vue({
components: {
NotificationCenter,
},
el: '#app',
template: `
<div>
<notification-center
:queue="notifications">
</notification-center>
<label>
<strong>Type</strong> <br>
Error <input v-model="type" type="radio" name="type" value="error"> <br>
Warning <input v-model="type" type="radio" name="type" value="warning"> <br>
Info <input v-model="type" type="radio" name="type" value="info"> <br>
</label>
<label>
<strong>Message</strong>
<input v-model="message" type="text">
</label>
<label>
<strong>Dismissable</strong>
<input v-model="dismissable" type="checkbox">
</label>
<label>
<strong>Timeout</strong>
<input v-model="timeout" type="number" step="100" min="0">
</label>
<button @click="generateNotification">Generate notification</button>
</div>
`,
data: {
notifications: [],
type: null,
message: null,
dismissable: null,
timeout: null,
},
methods: {
generateNotification() {
const {
type,
message,
dismissable,
timeout,
} = this;
this.notifications.push({
type,
message,
dismissable,
timeout,
});
this.type = this.message = this.dismissable = this.timeout = null;
},
},
});.notification-bar {
box-sizing: border-box;
position: absolute;
top: -3.2rem;
right: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 3.2rem;
color: #fff;
font-family: 'Avenir Next', sans-serif;
font-size: 1.2em;
line-height: 3.2rem;
text-align: center;
transition: top 266ms ease;
}
.notification-bar--error {
background-color: #f02a4d;
}
.notification-bar--warning {
background-color: #ffc107;
}
.notification-bar--info {
background-color: #2196f3;
}
.notification-bar--visible {
top: 0;
}
label {
display: block;
margin: 2rem 0;
font-size: 1.4rem;
}
label:first-of-type {
margin-top: 5rem;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html {
font-size: 62.5%;
}
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</body>
</html>重现问题的步骤
- 在 Chrome 中通过 sn-p 运行。
- 生成通知。 （将type设置为任何内容，将message设置为任何内容，设置dismissable，点击Generate notification）
- 注意通知栏
预期行为
通知栏平滑地动画到可见视口中。您可以通过在 Firefox 中执行上述步骤来观察这一点。
这是一个 GIF，展示了 Chrome 中的正确行为。点击生成通知后，您可以看到该栏平滑过渡。
以下是 Chrome 正常运行时的时间线截图：
这是 Chrome 正常运行时的调用树：
实际行为
通知栏在大多数情况下都无法平滑地动画到可见视口中。在 Chrome Devtools 中捕获时间线显示在显示通知栏时没有运行动画。当栏在屏幕外进行动画处理时，动画始终正确运行。动画在 Firefox 中始终正确运行。
这是一个 GIF，展示了 Chrome 中的错误行为。点击生成通知后，您会看到该栏突然出现。
以下是 Chrome 行为不正常时的时间线截图：
这是 Chrome 行为不正确时的调用树：
其他信息
代码在做什么的概述：
-
NotificationCenter接受queue属性。这是一个对象数组，其中数组表示通知队列，对象表示单个通知。 -
一旦
queue更改，观察程序就会运行检查队列中是否有通知以及是否没有活动通知。如果是这种情况，则将下一个通知设置为活动通知。 -
NotificationCenter的模板有一个指令循环遍历active中的项目并呈现NotificationBar。在上一步中，设置了一个新的活动通知，因此将创建一个新的通知栏并将其挂载到 DOM。 -
一旦
NotificationBar被挂载到DOM 上，它的show方法就会在window.requestAnimationFrame内部运行。
【问题讨论】：
-
我在运行 Chrome v 56.0.2924.87 的 Mac 上获得流畅的动画
-
@RoyJ：你是否始终如一地理解它？
-
是的，我已经多次运行 sn-p（全屏）。每次，横幅都会从顶部顺利滑入。
-
@RoyJ：感谢您的确认。我进一步缩小了问题的范围。只有在页面加载后发送第一个通知时，Chrome 中的通知栏动画才会流畅。随后的通知动画流畅。你能说这也是你的情况吗？
-
对我来说，它第一次运行与后续运行相同。
标签： javascript google-chrome vue.js css-transitions requestanimationframe