//var Vue = require('vue')
// это вариант автора genri. если раскомментировать - сломается.
//var VueRouter = require('vue-router').default
// это вариант автора genri. если раскомментировать - сломается.
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// Vue.use(VueRouter)
// эта строка не мешает, если будет нужна - пожалуйста...
const router = new VueRouter({
// mode: 'history',
// и без этой строки сможем обойтись.
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})
const app = new Vue({ el: '#app', router: router })
// это вариант автора genri. как видим, он рабочий.
//const app = new Vue({router}).$mount('#app')
// это тоже рабочий, шаблонный вариант.
background-image
в чистом виде (картинка) не анимируемое свойство, градиент — на данный момент это картинка, просто отрендеренная браузером из параметров свойства.ease
у transition-timing-function указывать бессмысленно, ибо это и есть его стандартное значение (если, конечно, вы его не хотите перезадать).background
— это сборное свойство, которое состоит из background-image, background-size, background-repeat, background-position, background-color, background-attachment и background-clip — поэтому почитайте, что вы можете из этого анимировать и каким способом.none
просто отключает любое свойство (даже анимируемое), что не позволяет переходу свершиться, даже если он возможен. <svg><use/ xlink:href='path/to/sprite.svg#icon-name'><svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol fill="none" viewBox="0 0 18 18" id="archive" xmlns="http://www.w3.org/2000/svg"><path d="M9 0v10.42m0 0L6.143 7.676M9 10.42l2.857-2.742M6 5H4.5L1 12m0 0v5h16v-5M1 12h4a1 1 0 011 1 1 1 0 001 1h4a1 1 0 001-1 1 1 0 011-1h4m0 0l-3.5-7H12"/></symbol>
...
const gulp = require('gulp'),
cheerio = require('gulp-cheerio'),
svgmin = require('gulp-svgmin'),
replace = require('gulp-replace'),
util = require('gulp-util'),
notify = require('gulp-notify'),
svgSprite = require('gulp-svg-sprite'),
path = require('path');
let dest = path.join('src', 'assets', 'icons');
let svgConfig = {
mode: {
symbol:{
sprite: "../sprite.svg"
}
}
};
gulp.task('sprite', function() {
gulp.src("**/*.svg", {cwd: path.join(dest, 'exported')})
.pipe(svgSprite(svgConfig))
.pipe(cheerio({
run: function ($) {
$('[stroke]').removeAttr('stroke');
$('[viewBox]').attr('viewBox', '0 0 18 18');
return
},
parserOptions: {xmlMode: true}
}))
.pipe(replace('>', '>'))
.on('error', function(err) {
util.log(err);
})
.on('error', notify.onError('sprite compiling error!'))
.pipe(gulp.dest(dest))
});
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="none">
<symbol id="menu-white" viewBox="0 0 42 42">
<circle cx="20" cy="20" r="19" stroke="white" stroke-width="2"/>
<circle cx="19.5" cy="10.5" r="2.5" fill="currentColor"/>
<circle cx="19.5" cy="19.5" r="2.5" fill="currentColor"/>
<circle cx="19.5" cy="28.5" r="2.5" fill="currentColor"/>
</symbol>
</svg>
<svg class="ico" width="42" height="42"><use xlink:href="#menu-white"/></svg>
$color-white: #fff;
.ico {
color: $color-white;
}
.bg-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
overflow: hidden;
}
.bg-wrapper:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index:-1;
background: #0F2027;
background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);
background: linear-gradient(to right, #2C5364, #203A43, #0F2027);
filter: blur(150px);
opacity: 0.8;
}
.bg-wrapper
появляется ограничения overflow: hidden;
add_action('wp_enqueue_scripts','load_styles_scripts');
if(!function_exists('load_styles_scripts')):function load_styles_scripts(){
wp_enqueue_script('click',get_template_directory_uri().'/js/click.js',array('jquery'));//подключенный файл скрипта в котором Вы хотите использовать функцию is_admin_bar_showing
$IABS=array('IABS_Out'=>is_admin_bar_showing());
wp_localize_script('click','IABS_In',$IABS);//передаем в файл скрипта функцию
}endif;
var IABS=IABS_In.IABS_Out;
if(IABS){alert('Админ бар отображается');}
const inputs = document.querySelectorAll('input')
inputs.forEach(i => {
const div = document.createElement('div')
div.className = "superdiv"
i.parentNode.appendChild(div)
})
inputs.forEach(i => i.addEventListener('input', (e) => {
e.target.parentNode.querySelector('.superdiv').textContent = e.target.value
}))
Есть ли вариант запустить функцию funIn() без использования стрелочной функции ?
item.on('keyup', funIn.bind(null, index, item));
$('selector').on('keyup', 'input', function () {
funIn( this );
});
const slider = $('.price-slider');
const val_outputs = [
$('.left-range'),
$('.right-range')
];
slider.on('input', updatePriceLabels);
function updatePriceLabels() {
var sliders = slider.children('input');
var x, y = 0;
var val1 = parseInt(sliders[0].value);
var val2 = parseInt(sliders[1].value);
if (val1 >= val2) {
sliders[1].value = val1 - 0;
return;
}
//....
//после всех проверок
val_outputs[0].val(val1);
val_outputs[1].val(val2);
}