14.2 C
Москва
16.10.2026

74

Как переключится на бота в css

Как реализовать переключение блоков с помощью css?

В шаблоне имеется 3 блока и снизу справа стрелочки возможно ли реализовать переключение между блоками при нажатии на стрелочки с помощью css?

Отслеживать
задан 26 дек 2019 в 10:27
Knurl360259 Knurl360259
154 1 1 серебряный знак 8 8 бронзовых знаков

Если у вас всего 3 блока и все они видны, то зачем вам переключалка? А подсветку можно hover ом сделать.

26 дек 2019 в 10:54
я это все понимаю, но макет такой возможно блоков может быть больше)
26 дек 2019 в 11:44

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Согласен с комментарием под вопросом, но если нужно вот примерная реализация 

 
 
 
Slide 1
 
 
Slide 2
 
 
Slide 3
 
 
 
1 2 3

Отслеживать
ответ дан 26 дек 2019 в 11:15
68 9 9 бронзовых знаков

  • html
  • css
  • css3
  • html5
  • css-grid
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Переключение стилей в CSS: как реализовать и зачем это нужно

Lorem ipsum dolor

Переключение стилей CSS на веб-сайте дает пользователю эффектное ощущение, что он сам настраивает под себя веб-ресурс. Лет 15 назад такое действие удавалось осуществлять единицам, потому что инструментов для этого не было и приходилось все решать «костылями».

А по сути, переключение стилей CSS на веб-ресурсе открывает веб-дизайнерам возможность реализовать несколько видов стилей для одного и того же ресурса. На многих ресурсах уже реализовано переключение темы сайта «день-ночь». Кстати, переключение «день-ночь» на веб-ресурсах не является прихотью их владельцев. Компания Гугл рекомендует внедрять подобное переключение, так как людям с некоторыми нарушениями зрения легче просматривать веб-страницу в «темной» теме.

Переключение стилей CSS

  • по времени, когда стили чередуются между собой спустя какой-то временной промежуток;
  • реакция на действия пользователя, когда стиль меняется в зависимости от того, что делает пользователь на странице;
  • при помощи кнопки, когда переключение между стилями происходит принудительно, если нажать кнопку или перевести «ползунок» в другое положение;
  • и др.
  • при помощи возможностей самой таблицы стилей;
  • с использованием библиотек jQuery и/или jQuery UI;
  • при помощи языка программирования, например: JavaScript, PHP, Python, Java и др.

Переключение стилей при помощи чистого CSS

Переключение стилей при помощи чистого CSS осуществляется через псевдоклас с «:checked». Такой способ подходит, если нужно организовать переключение при помощи воздействия пользователя на элемент. Псевдокласс «:checked» обозначает состояние элемента, к которому он привязан. Обычно его привязывают к чекбоксу или радиокнопк е . Таким образом , пользователь сам может изменять состояние элемента, если отметит чекбокс или выберет определенную радиокнопку.

Как реализовать переключение стилей CSS кодом

Мы покажем , по какому принципу реализуется смен а стилей при помощи псевдокласса «:checked». Допустим , у вас на сайте есть чекбокс из 4-х компонентов. При выборе одного из компонентов должна происходить смена стилей. К примеру, в стилях у нас будет указана смена фона какого-то HTML-блока.

Код HTML будет примерно таким:

Lighter Background

Darker Background

Picture Background

Template Background

Для радиокнопок мы не укажем собственный стиль — это вы сделаете сами. В собственном стиле отразится , как они должны выглядеть и где должны располагаться. Мы покажем, как будет выглядеть псевдокласс «:checked».

Код CSS будет таким:

.lighter-layout:checked

background: #eaeaea;

>

.darker-layout:checked

background: #494949;

>

.picture-layout:checked

background: url(image url) no-repeat center 0 fixed;

>

.template-layout:checked

background: url(images/template.png) repeat;

>

Заключение

Переключение стилей при помощи возможностей самого CSS стало возможным благодаря псевдоклассам. Вообще, CSS с каждым обновлением становится функциональней и понемногу отбирает функциональности у JavaScript. На данны й момен т р еализация большинства «плюшек» на веб-странице не требует знания JavaScript, а ограничивается пониманием возможностей CSS.

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

Анимирование списков и появления/исчезновения

Vue даёт возможность самым разным образом анимировать переходы при обновлении объектов DOM, а также при их добавлении и удалении. Его инструменты дают возможность:

  • автоматически применять CSS-классы для анимаций и переходов
  • интегрировать сторонние библиотеки CSS-анимаций, такие как Animate.css
  • использовать JavaScript для работы с DOM напрямую в хуках переходов
  • интегрировать сторонние библиотеки JavaScript-анимаций, такие как Velocity.js

На этой странице мы рассмотрим только анимации появления и исчезновения элементов, а также анимации списков. В следующем разделе вы можете найти информацию об анимировании переходов между состояниями.

Анимирование одиночного элемента/компонента

Vue располагает компонентом-обёрткой transition , позволяющим анимировать появление и исчезновение элемента или компонента в следующих случаях:

  • Условная отрисовка (используя v-if )
  • Условное отображение (используя v-show )
  • Динамические компоненты
  • Корневые элементы компонентов

Рассмотрим в действии простой пример:

div id="demo"> 
button v-on:click="show = !show"> 
Переключить 
button> 
transition name="fade"> 
p v-if="show">привет p> 
transition> 
div> 
new Vue({ 
el: '#demo', 
data: { 
show: true 
}
})
.fade-enter-active, .fade-leave-active { 
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active до версии 2.1.8 */ { 
opacity: 0;
}

Переключить

Когда элемент, завёрнутый в компонент transition , вставляется или удаляется, происходят следующие действия:

  1. Vue автоматически узнаёт, применены ли к целевому элементу CSS-переходы или анимации. Если да, соответствующие CSS-классы будут должным образом обновлены в нужные моменты времени.
  2. Если для компонента указаны хуки JavaScript, они будут вызваны в соответствующие моменты времени.
  3. Если не обнаружено ни CSS-переходов и анимаций, ни JavaScript-хуков, операции DOM для вставки или удаления элемента будут выполнены непосредственно в следующем анимационном фрейме (важно: речь идёт об анимационном фрейме браузера, отличном от используемой во Vue концепции nextTick ).

Классы переходов

Есть шесть классов, применяющихся в анимациях появления и исчезновения элементов:

  1. v-enter : Означает начало анимации появления элемента. Этот класс добавляется перед вставкой элемента, а удаляется в следующем фрейме после вставки.
  2. v-enter-active : Означает, что анимация появления элемента активна. Этот класс остаётся в течение всей анимации. Он добавляется перед вставкой элемента, а удаляется как только переход или анимация прекратились. Используйте его для установки длительности, задержки и плавности (easing curve) анимации появления.
  3. v-enter-to : Доступно только в версиях 2.1.8+. Означает, что анимация появления элемента завершается. Класс добавляется в следующем фрейме после вставки элемента (тогда же, когда будет удалён v-enter ), удаляется после завершения перехода или анимации.
  4. v-leave : Означает начало анимации исчезновения элемента. Класс добавляется как только началась анимация исчезновения, а удаляется в следующем фрейме после этого.
  5. v-leave-active : Означает, что анимация исчезновения элемента активна. Этот класс остаётся в течение всей анимации. Он добавляется как только начинается анимация исчезновения, а удаляется как только переход или анимация прекратились. Используйте его для установки длительности, задержки и плавности (easing curve) анимации исчезновения.
  6. v-leave-to : Доступно только в версиях 2.1.8+. Означает, что анимация исчезновения элемента завершается. Класс добавляется в следующем фрейме после начала анимации исчезновения (тогда же, когда будет удалён v-leave ), а удаляется после завершения перехода или анимации.

Диаграмма переходов

Для каждого из этих классов указывается префикс, соответствующий имени перехода. Префикс v- применяется по умолчанию, если элемент используется без указания параметра name . Например, для вместо класса v-enter будет применяться my-transition-enter .

v-enter-active и v-leave-active дают возможность указать различные анимационные эффекты для переходов появления и исчезновения элемента. Пример их использования будет приведён ниже.

CSS-переходы

Одни из самых распространённых типов анимации — это CSS-переходы. Вот небольшой пример:

div id="example-1"> 
button @click="show = !show"> 
Переключить отрисовку 
button> 
transition name="slide-fade"> 
p v-if="show">привет p> 
transition> 
div> 
new Vue({ 
el: '#example-1', 
data: { 
show: true 
}
})
/* Анимации появления и исчезновения могут иметь */
/* различные продолжительности и динамику. */
.slide-fade-enter-active { 
transition: all .3s ease;
}
.slide-fade-leave-active { 
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active до версии 2.1.8 */ { 
transform: translateX(10px); 
opacity: 0;
}

Переключить отрисовку

CSS-анимации

CSS-анимации применяются таким же образом, как и CSS-переходы, с одним отличием: v-enter удаляется не сразу же после вставки элемента, а только при наступлении события animationend .

В этом примере браузерные CSS-префиксы опущены для краткости:

div id="example-2"> 
button @click="show = !show">Переключить отображение button> 
transition name="bounce"> 
p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus. p> 
transition> 
div> 
new Vue({ 
el: '#example-2', 
data: { 
show: true 
}
})
.bounce-enter-active { 
animation: bounce-in .5s;
}
.bounce-leave-active { 
animation: bounce-in .5s reverse;
}
@keyframes bounce-in { 
0% { 
transform: scale(0); 
} 
50% { 
transform: scale(1.5); 
} 
100% { 
transform: scale(1); 
}
}

Переключить отображение

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.

Пользовательские классы переходов

Вы также можете использовать пользовательские классы переходов, указывая следующие атрибуты:

  • enter-class
  • enter-active-class
  • enter-to-class (в версии 2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (в версии 2.1.8+)

Таким образом стандартные названия классов будут переопределены, что может быть особенно полезно для комбинирования системы анимированных переходов Vue с возможностями сторонних библиотек CSS-анимаций, таких как Animate.css.

link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

div id="example-3"> 
button @click="show = !show"> 
Переключить отрисовку 
button> 
transition
 name="custom-classes-transition"
 enter-active-class="animated tada"
 leave-active-class="animated bounceOutRight"
 > 
p v-if="show">привет p> 
transition> 
div> 
new Vue({ 
el: '#example-3', 
data: { 
show: true 
}
})

Совместное использование переходов и анимаций

Для того чтобы Vue знал о завершении анимации, ему требуется установка подписчиков на события. В зависимости от используемых правил CSS, таким событием будет либо transitionend , либо animationend . Если вы используете только один из подходов, Vue определит правильный тип автоматически. Однако, иногда может потребоваться использование обоих подходов на одном элементе. Например, CSS-анимация под управлением Vue при появлении или исчезновении элемента может соседствовать с эффектом CSS-перехода при наведении курсора мыши на элемент. В таких случаях потребуется явное указание типа события, на которое должен будет ориентироваться Vue. Атрибут type может получить значение animation или transition .

Указание длительности перехода

Добавлено в версии 2.2.0+

transition :duration="1000">. transition> 
transition :duration="{ enter: 500, leave: 800 }">. transition>

JavaScript-хуки

transition
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:after-enter="afterEnter"
 v-on:enter-cancelled="enterCancelled" 

 v-on:before-leave="beforeLeave"
 v-on:leave="leave"
 v-on:after-leave="afterLeave"
 v-on:leave-cancelled="leaveCancelled"
> 
  
transition> 
// . 
methods: { 
// -------- 
// ПОЯВЛЕНИЕ 
// --------
 
beforeEnter: function (el) { 
// . 
}, 
// коллбэк done не обязательно использовать, если 
// анимация или переход также определены в CSS 
enter: function (el, done) { 
// . 
done() 
}, 
afterEnter: function (el) { 
// . 
}, 
enterCancelled: function (el) { 
// . 
},
 
// -------- 
// ИСЧЕЗНОВЕНИЕ 
// --------
 
beforeLeave: function (el) { 
// . 
}, 
// коллбэк done не обязательно использовать, если 
// анимация или переход также определены в CSS 
leave: function (el, done) { 
// . 
done() 
}, 
afterLeave: function (el) { 
// . 
}, 
// leaveCancelled доступна только для v-show 
leaveCancelled: function (el) { 
// . 
}
}

Velocity работает примерно так же, как и jQuery.animate,
и весьма удобен для создания JavaScript-анимаций
-->
script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"> script>

div id="example-4"> 
button @click="show = !show"> 
Переключить 
button> 
transition
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:leave="leave"
 v-bind:css="false"
 > 
p v-if="show"> 
Демо 
p> 
transition> 
div> 
new Vue({ 
el: '#example-4', 
data: { 
show: false 
}, 
methods: { 
beforeEnter: function (el) { 
el.style.opacity = 0 
el.style.transformOrigin = 'left' 
}, 
enter: function (el, done) { 
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 }) 
Velocity(el, { fontSize: '1em' }, { complete: done }) 
}, 
leave: function (el, done) { 
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 }) 
Velocity(el, { rotateZ: '100deg' }, { loop: 2 }) 
Velocity(el, { 
rotateZ: '45deg', 
translateY: '30px', 
translateX: '30px', 
opacity: 0 
}, { complete: done }) 
} 
}
})

Переходы при первичной отрисовке

transition appear> 
  
transition> 
transition
 appear
 appear-class="custom-appear-class"
 appear-to-class="custom-appear-to-class" (в версии 2.1.8+)
 appear-active-class="custom-appear-active-class"
> 
  
transition> 
transition
 appear
 v-on:before-appear="customBeforeAppearHook"
 v-on:appear="customAppearHook"
 v-on:after-appear="customAfterAppearHook"
 v-on:appear-cancelled="customAppearCancelledHook"
> 
  
transition>

Переходы между элементами

transition> 
table v-if="items.length > 0"> 
  
table> 
p v-else>Жаль, но ничего не найдено. p> 
transition> 
transition> 
button v-if="isEditing" key="save"> 
Сохранить 
button> 
button v-else key="edit"> 
Редактировать 
button> 
transition> 
transition> 
button v-bind:key="isEditing"> 
{{ isEditing ? 'Сохранить' : 'Редактировать' }} 
button> 
transition> 
transition> 
button v-if="docState === 'saved'" key="saved"> 
Редактировать 
button> 
button v-if="docState === 'edited'" key="edited"> 
Сохранить 
button> 
button v-if="docState === 'editing'" key="editing"> 
Отмена 
button> 
transition> 
transition> 
button v-bind:key="docState"> 
{{ buttonMessage }} 
button> 
transition> 
// . 
computed: { 
buttonMessage: function ( ) { 
switch (this.docState) { 
case 'saved': return 'Редактировать' 
case 'edited': return 'Сохранить' 
case 'editing': return 'Отмена' 
} 
}
}

Режимы переходов

Однако сохраняется одна проблема. Попробуйте кликнуть на кнопку ниже:

Во время перехода от кнопки «on» к кнопке «off» одновременно отображаются обе кнопки: одна — исчезая, другая — появляясь. Так ведёт себя по умолчанию. Иногда это поведение подходит, например если оба элемента абсолютно спозиционированы в одном и том же месте:

Таким образом можно также сымитировать анимацию слайдера:

  • in-out : Сначала появляется новый элемент, и только после этого исчезает старый.
  • out-in : Сначала исчезает старый элемент, и только после этого появляется новый.

Давайте теперь изменим переход для наших on/off кнопок, используя out-in :

transition name="fade" mode="out-in"> 
  
transition>

Добавив всего лишь один атрибут, мы исправили исходную анимацию перехода, не прибегая к редактированию стилей.

Читать:
Как получить значки в дискорде

Режим in-out применяется не столь часто, но для достижения некоторых эффектов и он может быть полезен. Давайте попробуем совместить его с ранее рассмотренной анимацией слайдера:

Переходы между компонентами

Переходы между компонентами — ещё проще, нам даже не нужен атрибут key . Всё, что нужно — завернуть динамический компонент в :

transition name="component-fade" mode="out-in"> 
component v-bind:is="view"> component> 
transition> 
new Vue({ 
el: '#transition-components-demo', 
data: { 
view: 'v-a' 
}, 
components: { 
'v-a': { 
template: '
Компонент А
' 
}, 
'v-b': { 
template: '
Компонент Б
' 
} 
}
})
.component-fade-enter-active, .component-fade-leave-active { 
transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active до версии 2.1.8 */ { 
opacity: 0;
}

Переходы в списках

Мы уже разобрались с переходами для:

  • Одиночных элементов
  • Множеств элементов, в случаях когда единовременно не может отображаться более одного элемента из множества

А как насчёт ситуации, когда у нас есть целый список элементов, который мы бы хотели отображать одновременно, например директивой v-for ? В этом случае, мы используем компонент . Прежде чем мы перейдём к примеру, важно отметить несколько важных моментов, касающихся этого компонента:

  • В отличие от , он создаёт реальный элемент. По умолчанию это , но можно изменить на любой другой, указав атрибут tag .
  • Режимы переходов недоступны, так как мы больше не переключаемся туда-сюда между взаимоисключающими элементами.
  • У каждого элемента внутри всегда обязательно должно быть уникальное значение атрибута key .
  • CSS-классы переходов будут применяться к внутренним элементам, а не к самой группе/контейнеру.

Анимация вставки и удаления элементов списка

Давайте теперь разберём несложный пример анимации перехода вставки и удаления, использующий те же CSS-классы, что мы рассматривали ранее:

div id="list-demo"> 
button v-on:click="add">Добавить button> 
button v-on:click="remove">Удалить button> 
transition-group name="list" tag="p"> 
span v-for="item in items" v-bind:key="item" class="list-item"> 
{{ item }} 
span> 
transition-group> 
div> 
new Vue({ 
el: '#list-demo', 
data: { 
items: [1,2,3,4,5,6,7,8,9], 
nextNum: 10 
}, 
methods: { 
randomIndex: function ( ) { 
return Math.floor(Math.random() * this.items.length) 
}, 
add: function ( ) { 
this.items.splice(this.randomIndex(), 0, this.nextNum++) 
}, 
remove: function ( ) { 
this.items.splice(this.randomIndex(), 1) 
}, 
}
})
.list-item { 
display: inline-block; 
margin-right: 10px;
}
.list-enter-active, .list-leave-active { 
transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active до версии 2.1.8 */ { 
opacity: 0; 
transform: translateY(30px);
}

С этим примером есть одна проблема. При добавлении или удалении элемента, окружающие его элементы резко перемещаются, вместо того чтобы плавно перелететь на новые места. Мы исправим это позднее.

Анимация перемещения элементов списка

У компонента припасён ещё один козырь в рукаве. Он способен анимировать не только появление и удаление элементов, но также и их перемещение. Происходит это путём добавления класса v-move , который указывается при изменении позиции элементов. Как и с другими классами, префикс устанавливается в соответствии с указанным значением атрибута name . Аналогично, можно указать класс вручную в атрибуте move-class .

Этим классом удобнее всего указывать продолжительность и тайминги перехода:

script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"> script>

div id="flip-list-demo" class="demo"> 
button v-on:click="shuffle">Перемешать button> 
transition-group name="flip-list" tag="ul"> 
li v-for="item in items" v-bind:key="item"> 
{{ item }} 
li> 
transition-group> 
div> 
new Vue({ 
el: '#flip-list-demo', 
data: { 
items: [1,2,3,4,5,6,7,8,9] 
}, 
methods: { 
shuffle: function ( ) { 
this.items = _.shuffle(this.items) 
} 
}
})
.flip-list-move { 
transition: transform 1s;
}

Хотя это и может выглядеть как магия, «под капотом» Vue использует довольно простую анимационную технику под названием FLIP, которая позволяет плавно перевести элементы с их старых позиций на новые, используя CSS-трансформации.

Теперь мы можем совместить эту технику с нашим предыдущим примером, чтобы анимировать все возможные изменения нашего списка!

script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"> script>

div id="list-complete-demo" class="demo"> 
button v-on:click="shuffle">Перемешать button> 
button v-on:click="add">Добавить button> 
button v-on:click="remove">Удалить button> 
transition-group name="list-complete" tag="p"> 
span
 v-for="item in items"
 v-bind:key="item"
 class="list-complete-item"
 > 
{{ item }} 
span> 
transition-group> 
div> 
new Vue({ 
el: '#list-complete-demo', 
data: { 
items: [1,2,3,4,5,6,7,8,9], 
nextNum: 10 
}, 
methods: { 
randomIndex: function ( ) { 
return Math.floor(Math.random() * this.items.length) 
}, 
add: function ( ) { 
this.items.splice(this.randomIndex(), 0, this.nextNum++) 
}, 
remove: function ( ) { 
this.items.splice(this.randomIndex(), 1) 
}, 
shuffle: function ( ) { 
this.items = _.shuffle(this.items) 
} 
}
})
.list-complete-item { 
transition: all 1s; 
display: inline-block; 
margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-to
/* .list-complete-leave-active до версии 2.1.8 */ { 
opacity: 0; 
transform: translateY(30px);
}
.list-complete-leave-active { 
position: absolute;
}

Важно знать, что FLIP-анимации не работают с элементами, для которых установлен режим позиционирования display: inline . Вместо него используйте режим display: inline-block или flex-контейнер.

FLIP-анимации не ограничены одной осью. Многомерные массивы могут быть анимированы столь же просто:

Ленивое судоку

Продолжайте перемешивать, пока случайно не выиграете.

Упругая анимация элементов списка

Настраивая JavaScript-переходы через data-атрибуты возможно также организовать упругую анимацию списка:

script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"> script>

div id="staggered-list-demo"> 
input v-model="query"> 
transition-group
 name="staggered-fade"
 tag="ul"
 v-bind:css="false"
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:leave="leave"
 > 
li
 v-for="(item, index) in computedList"
 v-bind:key="item.msg"
 v-bind:data-index="index"
 >{{ item.msg }} li> 
transition-group> 
div> 
new Vue({ 
el: '#staggered-list-demo', 
data: { 
query: '', 
list: [ 
{ msg: 'Брюс Ли' }, 
{ msg: 'Джеки Чан' }, 
{ msg: 'Чак Норрис' }, 
{ msg: 'Джет Ли' }, 
{ msg: 'Кунг Фьюри' } 
] 
}, 
computed: { 
computedList: function ( ) { 
var vm = this 
return this.list.filter(function (item) { 
return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1 
}) 
} 
}, 
methods: { 
beforeEnter: function (el) { 
el.style.opacity = 0 
el.style.height = 0 
}, 
enter: function (el, done) { 
var delay = el.dataset.index * 150 
setTimeout(function ( ) { 
Velocity( 
el, 
{ opacity: 1, height: '1.6em' }, 
{ complete: done } 
) 
}, delay) 
}, 
leave: function (el, done) { 
var delay = el.dataset.index * 150 
setTimeout(function ( ) { 
Velocity( 
el, 
{ opacity: 0, height: 0 }, 
{ complete: done } 
) 
}, delay) 
} 
}
})

Повторное использование анимированных переходов

Анимация переходов может быть переиспользована благодаря компонентной системе Vue. Всё, что необходимо сделать — это поместить компонент или в корне компонента, а затем передать в этот компонент потомков.

Пример с использованием компонента со строковым шаблоном:

Vue.component('my-special-transition', { 
template: '\
 
 name="very-special-transition"\
 mode="out-in"\
 v-on:before-enter="beforeEnter"\
 v-on:after-enter="afterEnter"\
 >\
 \ 
\
 ', 
methods: { 
beforeEnter: function (el) { 
// . 
}, 
afterEnter: function (el) { 
// . 
} 
}
})

Особенно хорошо для этих целей подходят функциональные компоненты:

Vue.component('my-special-transition', { 
functional: true, 
render: function (createElement, context) { 
var data = { 
props: { 
name: 'very-special-transition', 
mode: 'out-in' 
}, 
on: { 
beforeEnter: function (el) { 
// . 
}, 
afterEnter: function (el) { 
// . 
} 
} 
} 
return createElement('transition', data, context.children) 
}
})

Динамические переходы

Да, даже анимационные переходы во Vue управляются данными! Простейший пример — связывание атрибута name с динамическим свойством.

transition v-bind:name="transitionName"> 
  
transition>

Может пригодиться, если вы определили CSS-переходы или анимации, используя принятые во Vue соглашения об именовании классов, и просто хотите переключаться между ними.

На самом деле, любой атрибут может быть динамически связан. И речь не только об атрибутах. Поскольку хуки — это просто методы, у них есть доступ ко всем данным в текущем контексте, а значит и JavaScript-анимации могут зависеть от состояния компонента.

script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"> script>

div id="dynamic-fade-demo" class="demo"> 
Fade In: input type="range" v-model="fadeInDuration" min="0" v-bind:max="maxFadeDuration"> 
Fade Out: input type="range" v-model="fadeOutDuration" min="0" v-bind:max="maxFadeDuration"> 
transition
 v-bind:css="false"
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:leave="leave"
 > 
p v-if="show">привет p> 
transition> 
button
 v-if="stop"
 v-on:click="stop = false; show = false"
 >Запустить анимацию button> 
button
 v-else
 v-on:click="stop = true"
 >Остановить анимацию button> 
div> 
new Vue({ 
el: '#dynamic-fade-demo', 
data: { 
show: true, 
fadeInDuration: 1000, 
fadeOutDuration: 1000, 
maxFadeDuration: 1500, 
stop: true 
}, 
mounted: function ( ) { 
this.show = false 
}, 
methods: { 
beforeEnter: function (el) { 
el.style.opacity = 0 
}, 
enter: function (el, done) { 
var vm = this 
Velocity(el, 
{ opacity: 1 }, 
{ 
duration: this.fadeInDuration, 
complete: function ( ) { 
done() 
if (!vm.stop) vm.show = false 
} 
} 
) 
}, 
leave: function (el, done) { 
var vm = this 
Velocity(el, 
{ opacity: 0 }, 
{ 
duration: this.fadeOutDuration, 
complete: function ( ) { 
done() 
vm.show = true 
} 
} 
) 
} 
}
})

Fade In: Fade Out:

Запустить анимацию Остановить анимацию

Наконец, ещё больше возможностей для создания динамических переходов появляется, если создать компоненты, принимающие входные параметры, определяющие природу используемых переходов. Звучит избито, но всё равно — здесь всё ограничено только вашим воображением.

Обнаружили ошибку или хотите добавить что-то своё в документацию? Измените эту страницу на GitHub! Опубликовано на Netlify .

CSS — Переключатель с использованием JavaScript

CSS - Переключатель с использованием JavaScript

В этой статье разберем процесс создания переключателя для сайта с использованием CSS и JavaScript. Кроме этого ещё рассмотрим пример, в котором покажем, как можно отслеживать состояние переключателя и выполнять при его изменении некоторый код.

Что такое переключатель

Переключатель — это элемент интерфейса, предназначенный для выбора одно из двух состояний (включено или выключено).

Данный элемент можно использовать в некоторых случаях в качестве альтернативы checkbox (флажку).

HTML разметка переключателя

HTML код переключателя:

Для отображения переключателя во включенном состоянии необходимо дополнительно к switch-btn добавить ещё класс switch-on :

CSS стили для переключателя

Создать дизайн переключателю можно по-разному. В качестве примера рассмотрим 5 вариантов дизайна.

Дизайн переключателя как в Material Design

Дизайн переключателя как в Material Design

.switch-btn { display: inline-block; width: 62px; /* ширина переключателя */ height: 24px; /* высота переключателя */ border-radius: 12px; /* радиус скругления */ background: #bfbfbf; /* цвет фона */ z-index: 0; margin: 0; padding: 0; border: none; cursor: pointer; position: relative; transition-duration: 300ms; /* анимация */ } .switch-btn::after { content: ""; height: 36px; /* высота кнопки */ width: 36px; /* ширина кнопки */ border-radius: 18px; /* радиус кнопки */ background: #fff; /* цвет кнопки */ top: -6px; /* положение кнопки по вертикали относительно основы */ left: -6px; /* положение кнопки по горизонтали относительно основы */ transition-duration: 300ms; /* анимация */ box-shadow: 0 0 10px 0 #999999; /* тень */ position: absolute; z-index: 1; } .switch-on { background: #fff; box-shadow: inset 0 0 10px 0 #999999; /* тень */ } .switch-on::after { left: 30px; background: #118c4e; }

Дизайн переключателя для интерфейсов, не использующих скругления углов

Дизайн переключателя для интерфейсов, не использующих скругления углов

.switch-btn { display: inline-block; width: 62px; /* ширина переключателя */ height: 24px; /* высота переключателя */ background: #bfbfbf; /* цвет фона */ z-index: 0; margin: 0; padding: 0; border: none; cursor: pointer; position: relative; transition-duration: 300ms; /* анимация */ } .switch-btn::after { content: ""; height: 36px; /* высота кнопки */ width: 36px; /* ширина кнопки */ background: #fff; /* цвет кнопки */ top: -6px; /* положение кнопки по вертикали относительно основы */ left: -12px; /* положение кнопки по горизонтали относительно основы */ transition-duration: 300ms; /* анимация */ box-shadow: 0 0 10px 0 #999999; /* тень */ position: absolute; z-index: 1; } .switch-on { background: #fff; box-shadow: inset 0 0 10px 0 #999999; /* тень */ } .switch-on::after { left: 36px; background: #118c4e;}

Дизайн переключателя, в котором кнопка расположена внутри элемента, вдоль которого она перемещается

Дизайн переключателя, в котором кнопка расположена внутри элемента, вдоль которого она перемещается

.switch-btn { display: inline-block; width: 72px; /* ширина */ height: 38px; /* высота */ border-radius: 19px; /* радиус скругления */ background: #bfbfbf; /* цвет фона */ z-index: 0; margin: 0; padding: 0; border: none; cursor: pointer; position: relative; transition-duration: 300ms; /* анимация */ } .switch-btn::after { content: ""; height: 32px; /* высота кнопки */ width: 32px; /* ширина кнопки */ border-radius: 17px; background: #fff; /* цвет кнопки */ top: 3px; /* положение кнопки по вертикали относительно основы */ left: 3px; /* положение кнопки по горизонтали относительно основы */ transition-duration: 300ms; /* анимация */ position: absolute; z-index: 1; } .switch-on { background: #118c4e; } .switch-on::after { left: 37px; }

Дизайн переключателя с квадратной кнопкой

Дизайн переключателя с квадратной кнопкой

.switch-btn { display: inline-block; width: 72px; /* ширина */ height: 38px; /* высота */ background: #bfbfbf; /* цвет фона */ z-index: 0; margin: 0; padding: 0; border: none; cursor: pointer; position: relative; transition-duration: 300ms; /* анимация */ } .switch-btn::after { content: ""; height: 32px; /* высота кнопки */ width: 32px; /* ширина кнопки */ background: #fff; /* цвет кнопки */ top: 3px; /* положение кнопки по вертикали относительно основы */ left: 3px; /* положение кнопки по горизонтали относительно основы */ transition-duration: 300ms; /* анимация */ position: absolute; z-index: 1; } .switch-on { background: #118c4e; } .switch-on::after { left: 37px; }

Дизайн переключателя с градиентом

Дизайн переключателя с градиентом

.switch-btn { display: inline-block; width: 72px; /* ширина */ height: 38px; /* высота */ background: #bfbfbf; /* цвет фона */ z-index: 0; margin: 0; padding: 0; border: none; cursor: pointer; position: relative; transition-duration: 300ms; /* анимация */ } .switch-btn::after { content: ""; height: 32px; /* высота кнопки */ width: 32px; /* ширина кнопки */ background: #fff; /* цвет кнопки */ top: 3px; /* положение кнопки по вертикали относительно основы */ left: 3px; /* положение кнопки по горизонтали относительно основы */ transition-duration: 300ms; /* анимация */ position: absolute; z-index: 1; } .switch-on { background: #118c4e; } .switch-on::after { left: 37px; }

JavaScript код для переключателя

Изменение положение переключателя будем выполнять с помощью JavaScript. Для этого достаточно на страницу поместить следующий скрипт:

Но, чтобы было более удобно выполнять некоторые действия при изменении состояния переключателя, в js желательно добавить генерацию событий .

Событие on.switch будет возникать при перемещении ползунка переключателя в положение включено, а off.switch – в выключено.

Пример работы с событиями:

$('.switch-btn').on('on.switch', function(){ console.log('Кнопка переключена в состояние on'); }); $('.switch-btn').on('off.switch', function(){ console.log('Кнопка переключена в состояние off'); });

Пример JavaScript сценария, который будет выполнять действия не только при переключении, но и после загрузки документа .

Финальный пример с двумя переключателями, каждый из которых управляет видимостью определенного блока:

  .

Похожие записи

Как сделать игру на c visual studio

admin

Как отключить обновление windows 7

admin

Как обновить айфон 5 до ios 11 если нет обновлений

admin