大家好，我是 React 的新手，我面临以下问题：
我有 5 个块，其中包含我在循环中输出的数据。
但我不知道如何在中间添加一个完全不同的块。我从 json 加载卡片的数据，然后通过 .map 传输每个单独块的数据。
非常感谢您在这件事上的帮助！
renderBeds() {
return this.state.beds.map((bed, index) => {
return (
<Bed
key={index}
bed={bed}
/>
)
})
};
大家好，我正在尝试学习滚动动画，我想为此尝试使用 GSAP 的 ScrollMagic，但我什至无法编译我的文件。我将 laravel.mix 用于 webpack 作为我的项目构建器。
我试图在互联网上搜索答案，我发现的唯一一件事是：gsap 必须连接到 scrollmagic，事实上，我有它有点像..
我究竟做错了什么？以及如何解决它以使一切正常？
我的 javascript 看起来像这样：
import {TimelineMax} from 'gsap';
import ScrollMagic from 'ScrollMagic';
import 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators';
import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';
let tl = new TimelineMax();
let firstMan = document.getElementById('first-man');
tl.to(firstMan, 1, {x:'-100', y:'70'});
let controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({
duration: '100%', // resposive duration in %
offset: 0, // offset trigger position by 100px
triggerElement: '#firstTrigger', // what will trigger scene
triggerHook: 0
});
scene.addIndicators({name: 'bla bla'});
scene.setTween(tl);
scene.addTo(controller);
这是我的项目依赖项的样子：
但是当我尝试运行这段代码时，它给了我以下错误：
好的，我尝试了他的要求：
再会。开始在项目中使用 laravel.mix，但在 10 多秒内就遇到了编译墙><
如何让 laravel.mix 在一秒钟内编译我的源代码？
我的 webpack.mix.js：
let mix = require('laravel-mix');
mix.autoload({
jquery: ['$', 'window.jQuery']
});
mix.setPublicPath('./')
.sass('src/scss/main.scss', 'dist/css')
.sourceMaps()
.js('src/js/main.js', 'dist/js')
.extract(['bootstrap', 'popper.js', 'jquery' ]);
mix.browserSync({
proxy: 'laravel.mix.li-lit'
});
我的 package.json：
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"browserslist": [
"> 1%",
"last 3 version"
],
"devDependencies": {
"browser-sync": "^2.26.3",
"browser-sync-webpack-plugin": "^2.2.2",
"cross-env": "^5.2.0",
"css-mqpacker": "^7.0.0",
"cssnano": "^4.1.8",
"laravel-mix": "^4.0.14",
"resolve-url-loader": "^2.3.1",
"sass": "^1.16.1",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.22"
},
"dependencies": {
"bootstrap": "^4.2.1",
"inputmask": "^4.0.6",
"jquery": "^3.3.1",
"popper.js": "^1.14.6",
"swiper": "^4.4.6",
"wowjs": "^1.1.3"
}
}
这是我的 webpack 在 scss 编译开始时所说的（只是更改了背景并删除了）：
这是他在编译更改时所说的：
大家好，我最近开始使用 webpack。我为工作设置了它，一切似乎都很好，但是现在我需要将 index.html 的扩展名更改为 .php ，仅此而已，我现在只能在构建整个项目后才能看到更改。
我查看了带有设置的 browser-sync-webpack-plugin：
new BrowserSyncPlugin(
{
host: 'localhost',
port: 3000,
proxy: 'http://project',
files: [
{
match: ['./dist'],
fn(event, file) {
if (event === 'change') {
const bs = require('browser-sync').get('bs-webpack-plugin');
bs.reload();
}
},
},
],
},
{
reload: false,
}
)
但是我的 webpack 给了我一个错误：
找不到模块“浏览器同步”
如何设置我的 webpack 配置以同时使用 html 和 php 文件？
告诉我，我怎样才能像这个视频一样重复块外观的效果？
目前我有这样的事情。
外观是通过 clip-path 属性实现的。我想不出复制溶解效果的方法。
当您单击缩略图时，滑块本身会打开部分，而不仅仅是图片。那些。你戳一个缩影，里面有一段内容。
这是我的 HTML
<body>
<div class="men-block">
<img src="img/slider/men.png" alt="#">
</div>
<div class="wrapper" id="content">
<div class="wrap" id="slider">
<div class="images">
<div class="pict">
<div class="list" style="background-image: url(img/slider/1.jpg); background-position: top center; background-size: cover;" id="_0"></div>
</div>
<div class="pict">
<div class="list" style="background-image: url(img/slider/2.jpg); background-position: top center; background-size: cover;" id="_1"></div>
</div>
<div class="pict">
<div class="list" style="background-image: url(img/slider/3.jpg); background-position: top center; background-size: cover;" id="_2"></div>
</div>
<div class="pict">
<div class="list" style="background-image: url(img/slider/1.jpg); background-position: top center; background-size: cover;" id="_3"></div>
</div>
</div>
</div>
<!-- /.wrap -->
</div>
<!-- /.wrapper -->
<div class="sections">
<section class="item open" id="one" data-bg="url(img/slider/1.jpg)" data-id="_0"></section>
<!-- /.one -->
<section class="item close sec" data-bg="url(img/slider/2.jpg)" data-id="_1">
</section>
<!-- /.one -->
<section class="item close sec" data-bg="url(img/slider/3.jpg)" data-id="_2"></section>
<!-- /.one -->
<section class="item close sec" data-bg="url(img/slider/1.jpg)" data-id="_3"></section>
<!-- /.one -->
</div>
<!-- /.sectios -->
</body>
这是我的scss：
body {
position: relative;
}
.wrapper {
z-index: 5;
}
.wrap {
width: 100%;
}
.item {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-clip-path: circle(13.9% at 50% 50%);
clip-path: circle(13.9% at 50% 50%);
}
.sec {
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
}
#one {
background-image: url(../img/slider/1.jpg);
height: 100vh;
-webkit-clip-path: circle(70.9% at 50% 50%);
clip-path: circle(70.9% at 50% 50%);
}
.close {
opacity: 0;
z-index: 1;
}
.shadow{
box-shadow: 0 0 16px 16px white inset;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.sections {
min-height: 100vh;
background-size: cover;
background-position: center;
}
.slider {
z-index: 10;
overflow: auto;
white-space: nowrap;
}
.list {
display: inline-block;
margin-left: 8rem;
margin-right: 8rem;
width: 30rem;
height: 35rem;
border-radius: 1rem;
opacity: 0.9;
&:hover {
cursor: pointer;
}
}
.men-block {
position: absolute;
bottom: -50px;
left: 30%;
z-index: 10;
width: 150px;
img{
width: 100%;
}
}
.cut-wrap{
position: relative;
height: 500px;
margin-top: 200px;
}
#content {
position: absolute;
right: -5%;
top: 22.5%;
height: 500px;
width: 1000px;
}
#slider{
width: 100%;
height: 100%;
position: relative;
overflow:hidden;
-webkit-transition: transform 1.5s;
-moz-transition: transform 1.5s;
-ms-transition: transform 1.5s;
-o-transition: transform 1.5s;
transition: transform 1.5s;
}
#slider .left,.right{
width: 50px;
height: 50px;
box-sizing: border-box;
position: absolute;
top:40%;
cursor: pointer;
border: 1px solid #4d4d4d;
}
#slider .left{
left: 0;
}
#slider .right{
right: 0;
}
#slider .left img{
width: 50px;
height: 50px;
}
#slider .right img{
width: 50px;
height: 50px;
transform: rotate(180deg);
}
#slider .images .pict{
float: left;
}
.item{
&-header{
display: flex;
justify-content: space-around;
align-items: center;
&__item{
width: 50px;
height: 50px;
background-color: darkviolet;
}
}
&-content{
display: flex;
justify-content: center;
align-items: center;
flex: 1 0 auto;
&__item{
width: 100px;
height: 100px;
margin-left: 20px;
margin-right: 20px;
background-color: rosybrown;
}
}
&-footer{
display: flex;
justify-content: space-between;
align-items: center;
flex: 0 0 auto;
&__item{
width: 20px;
height: 60px;
background-color: yellowgreen;
}
}
}
这是我的js：
function list() {
const open = $('.list'); /* переменная открывает блок */
open.on('click', function () {
/* блок, на который мы тыкнули прячем в конец слайдера */
$(this).parent().appendTo('.images').fadeOut;
const parent = $(this);
let prevOpen = $('section.open'),
sectionItem = $('section.item'),
slider = $('#slider'),
nextSection = $('[data-id='+parent.attr('id')+']');
/* Отодвигаем секцию сослайдами через 500мс на 75% по Х при клике на блок open */
setTimeout(function () {
slider.css({"transform": "translateX(75%)"});
}, 600);
/*Возвращаем секцию в начальное положение*/
open.mouseenter(function () {
slider.css({"transform": "translateX(0)"});
});
/* делаем я-index меньше, чем у активного, что бы не было проблем с появлением изображений */
prevOpen.css({
"z-index": "1"
});
/* Ставим ищем нужную секцию по дата атрибуту */
if ( parent.attr('id') === nextSection.attr('data-id') ) {
nextSection.removeClass('close').addClass('open ').css({
"background-image": nextSection.attr("data-bg")
});
/* увеличиваем область видимости для эффекта появления секции */
nextSection.css({"clip-path": "circle(70.9% at 50% 50%)", "transition" : "clip-path 1.5s"});
/* прячем слайдер и отодвигаем его вправо */
let wrapper = $('.wrapper');
wrapper.css({"opacity" : "0", "transition" : "opacity 0.5s"});
setTimeout(function () {
wrapper.css({"opacity" : "1", "transition" : "opacity 1.5s"});
}, 1500);
}
/* добавляем бэкграунд текущего блока обертке, что бы при смене активног элемента у нас не было белого фона */
$('.sections').css({
'background-image': prevOpen.attr("data-bg")
});
/* Всем секциям, не являющимся открытой мы меняем классы на нужные */
sectionItem.not(nextSection).removeClass('open ').addClass('close').css({"clip-path": "circle(7.9% at 50% 50%)", "transition" : "clip-path 3s"});
});
}
list();
/* Бесконечный слайдер с возможностью прокрутки колесом мыши (на счет тач устройств пока не известно) */
function cut() {
const speed = 500;
let pictW,imgW,n,pict,img,currentM,end=true;
pict = $('#slider .pict');
img = $('#slider .images');
pictW = parseInt(pict.width());
n = pict.length;
imgW=(n+1)*pictW;
img.width(imgW);
currentM = -pictW;
/* Меняем слайды колесиком мыши */
$('#slider').bind({
mouseenter: function() {
$(this).on('wheel', (function(e) {
e.preventDefault();
if (e.originalEvent.deltaY < 0) {
if(end) {
end=false;
currentM = currentM + pictW;
img.animate({
marginLeft: currentM
}, speed, function () {
end = true;
$('.pict').last().prependTo('.images');
currentM = currentM - pictW;
img.css('marginLeft',currentM);
});
}
} else {
if(end) {
end=false;
currentM = currentM - pictW;
img.animate({
marginLeft: currentM
}, speed, function () {
end = true;
$('.pict').first().appendTo('.images');
currentM = currentM + pictW;
img.css('marginLeft',currentM);
});
}
}
}));
}
});
}
cut ();
大家好，问题的本质：在页面光滑滑块上可用。需要使用绝对定位来放置它，但是如果将其设置为 position: absolute，那么它的元素会变得非常宽。如何克服？我已经把它塞进了一堆包装纸里，只是还没试过。我做了绝对的包装，一切都是徒劳的......这是滑块的链接
HTML：
<div class="wrapper">
<div class="wrap">
<div class="slider">
<div class="list" ></div>
<!-- /.slider-item -->
<div class="list sec" ></div>
<!-- /.slider-item -->
<div class="list" ></div>
<!-- /.slider-item -->
<div class="list sec" ></div>
<!-- /.slider-item -->
<div class="list" ></div>
<!-- /.slider-item -->
</div>
</div>
<!-- /.wrap -->
</div>
<!-- /.wrapper -->
CSS：
.wrapper{
position: absolute;
}
.slider {
width: auto;
margin: 30px 50px 50px;
position: relative;
}
.list{
padding-left: 10px;
padding-right: 10px;
width: 50px;
height: 50px;
background-color: #aeaeae;
}
.sec{
background-color: red;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots {
bottom: -30px;
}
js：
$(".slider").slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
});