是否有可能在通用过渡Stylus混音中创建滚动？
是否有可能在通用过渡Stylus混音中创建滚动？
提问于 2019-02-23 04:43:01
JavaScript：
const show = entries => entries[0].isIntersecting ? entries[0].classList.remove('is-hidden') : null;
const observer = new IntersectionObserver(show, {threshold:0});
Array.from(document.querySelectorAll('.js-hidden')).forEach(element => observer.observe(element));当‘..js隐藏’类被移除时，我想在动画中播放淡出，如下所示.但是这个代码不起作用：
HTML：
<div class="my-component js-hidden is-hidden">
<p class="text text-1">Hello</p>
<p class="text text-2">World</p>
</div>手写笔：
fadeIn(duration=1s, delay=0s) {
opacity: 1;
transition: opacity duration ease delay;
&.is-hidden { // <- yeah, this is wrong... but, any ideas? I want to apply transition both element and pseudo element.
opacity: 0;
}
}
.my-component {
.text,
&::before,
&::after {
fadeIn();
}
.text-2 {
transition-delay: .3s;
}
&::before {
content: 'foo';
transition-delay: .5s;
}
&::after {
content: 'bar';
transition-delay: .7s;
}
}如果淡入元素嵌套得更多呢？
<div class="my-component js-hidden is-hidden">
<div class="wrapper-1">
<div class="wrapper-2">
<p class="text text-1">Hello</p>
<p class="text text-2">World</p>
</div>
</div>
</div>我想同时应用元素和伪元素的转换。但我不知道该怎么办..。
谢谢。
终于.
谢谢你安迪。
最后，我到达了下面的代码。XD
JavaScript：
const show = entries => entries[0].isIntersecting ? entries[0].target.classList.remove('is-hidden') : null;
const observer = new IntersectionObserver(show, {threshold:0});
Array.from(document.querySelectorAll('.js-hidden')).forEach(element => observer.observe(element));HTML：
<div class="my-component js-hidden is-hidden">
<p class="text text-1">Hello</p>
<p class="text text-2">World</p>
<p class="text text-3">Hello</p>
<p class="text text-4">World</p>
<p class="text text-5">Hello</p>
<p class="text text-6">World</p>
<p class="text text-7">Hello</p>
<p class="text text-8">World</p>
<p class="text text-9">Hello</p>
</div>手写笔：
fadeIn(target, duration=1s, delay=0s, property=all, easing=ease) {
{target} {
opacity: 1;
transition: duration property easing delay;
}
&.is-hidden {
{target} {
opacity: 0;
}
}
}
.my-component {
duration = .3s;
delay = 1s;
fadeIn('.text', duration:duration, delay:delay);
fadeIn('&::before', duration:duration, delay:delay);
fadeIn('&::after', duration:duration, delay:delay);
interval = duration;
amount = 9;
for i in 2..amount {
.text-{i} {
transition-delay: (interval * (i - 2) + duration + delay)s;
}
}
&::before {
content: 'FOOOOOOOOOOOOOOO';
transition-delay: (interval * ((amount + 1) - 2) + duration + delay)s;
}
&::after {
content: 'BARRRRRRRRRRRRRR';
transition-delay: (interval * ((amount + 2) - 2) + duration + delay)s;
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-23 06:10:22
首先，您似乎是在寻找transition，而不是animation。我不是Stylus专家，但我很了解IntersectionObserver和CSS。我现在有了基本的演示。
关于调整后的fadeIn函数的一些注记。
is-hidden是一个从一开始就存在于DOM中的类，所以当它不存在时提示transition- 使用转换中的委托模式--即让父元素中的更改影响子元素(不要侦听每个子/伪元素的类)
fadeIn(duration=1s, delay=0s) {
.text,
&::before,
&::after {
opacity: 0;
transition: 0.5s opacity ease;
}
&:not(.is-hidden) {
.text,
&::before,
&::after {
opacity: 1;
}
}
}此外，由于一些错误，我无法让您的JavaScript工作，并重写它以适应演示。这是重写的JavaScript
const components = document.querySelectorAll(".my-component");
const observer = new IntersectionObserver(components => {
components.forEach(component => {
if (component.intersectionRatio > 0) {
component.target.classList.remove("is-hidden")
} else {
component.target.classList.add("is-hidden")
}
})
});
Array.from(document.querySelectorAll(".js-hidden")).forEach(element =>
observer.observe(element)
);
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54838308
复制相关文章
相似问题
腾讯云开发者
